用CSS3实现了一个小风车的效果，转转转，挺简单。
效果
代码
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>小风车-转啊转</title> <styletype="text/css"> html{ font-size:10px; } html*{ -webkit-box-sizing:border-box; box-sizing:border-box; } .windmill{ width:25rem; min-height:30rem; height:auto; margin:3remauto; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-box-pack:start; -webkit-justify-content:flex-start; -ms-flex-pack:start; justify-content:flex-start; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; } /*头部*/ .windmill-head{ height:20rem; width:20rem; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -webkit-flex-direction:row; -ms-flex-direction:row; flex-direction:row; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:space-around; -ms-flex-pack:distribute; justify-content:space-around; -webkit-align-content:space-around; -ms-flex-line-pack:distribute; align-content:space-around; -webkit-transform:translateZ(0); transform:translateZ(0); -webkit-animation:rotate-windmill1slinearinfinite; animation:rotate-windmill1slinearinfinite; border-radius:50%; border:0.1remsolid#DBE526; -webkit-transition:border-radius2slinear; transition:border-radius2slinear; } /*两片叶子的包裹层*/ .wrapper{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between; height:135%; width:50%; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; } /*包裹层对称*/ .wrapper1{ -webkit-transform:rotate(-45deg)translate(5rem); transform:rotate(-45deg)translate(5rem); -webkit-transform-origin:rightcenter; transform-origin:rightcenter; } .wrapper2{ -webkit-transform:rotate(45deg)translate(-5rem); transform:rotate(45deg)translate(-5rem); -webkit-transform-origin:leftcenter; transform-origin:leftcenter; } /*扇叶的形状及底色*/ .leaf{ height:13rem; width:5rem; border-radius:5rem/5rem5rem20rem20rem; -webkit-box-shadow:0.1rem0.1rem1remrgba(64,56,56,.35)inset,0.2rem0.2rem0.05remrgba(0,0,0,.65); box-shadow:0.1rem0.1rem1remrgba(64,56,56,.35)inset,0.2rem0.2rem0.05remrgba(0,0,0,.65); } .leaf1{ border:0.05remsolid#D1A23A; -webkit-transform:rotate(0deg)translate(0); transform:rotate(0deg)translate(0); background-color:rgba(230,0,100,5); background:-webkit-gradient(linear,lefttop,leftbottom,from(#D02CE4),to(#f5f5f5)); background:-webkit-linear-gradient(top,#D02CE4,#f5f5f5); background:linear-gradient(180deg,#D02CE4,#f5f5f5); -webkit-transition:background2slinear; transition:background2slinear; } .leaf2{ border:0.05remsolid#49D13A; background-color:rgba(230,0,150,5); -webkit-transform:rotate(-180deg)translate(0); transform:rotate(-180deg)translate(0); background:-webkit-gradient(linear,lefttop,leftbottom,from(#B91717),to(#f5f5f5)); background:-webkit-linear-gradient(top,#B91717,#f5f5f5); background:linear-gradient(180deg,#B91717,#f5f5f5); -webkit-transition:background2slinear2s; transition:background2slinear2s; } .leaf3{ border:0.05remsolid#C6079D; background-color:rgba(130,0,100,5); -webkit-transform:rotate(0deg)translate(0); transform:rotate(0deg)translate(0); background:-webkit-gradient(linear,lefttop,leftbottom,from(#1CBA9F),to(#f5f5f5)); background:-webkit-linear-gradient(top,#1CBA9F,#f5f5f5); background:linear-gradient(180deg,#1CBA9F,#f5f5f5); -webkit-transition:background2slinear; transition:background2slinear; -webkit-transition:background2slinear4s; transition:background2slinear4s; } .leaf4{ border:0.05remsolid#3A5FD1; background-color:rgba(230,100,100,5); -webkit-transform:rotate(-180deg)translate(0); transform:rotate(-180deg)translate(0); background:-webkit-gradient(linear,lefttop,leftbottom,from(#335642),to(#f5f5f5)); background:-webkit-linear-gradient(top,#335642,#f5f5f5); background:linear-gradient(180deg,#335642,#f5f5f5); -webkit-transition:background2slinear6s; transition:background2slinear6s; } /*尾部*/ .windmill-pillar{ -webkit-transform:translateZ(0); transform:translateZ(0); width:3rem; height:20rem; background:#FFF; -webkit-transform:translateY(-52%); transform:translateY(-52%); position:relative; z-index:-2; border-radius:50%50%00; -webkit-animation:cd2slinearinfinite; animation:cd2slinearinfinite; } @-webkit-keyframesrotate-windmill{ 0%{ -webkit-transform:rotate(0); transform:rotate(0); } 100%{ -webkit-transform:rotate(360deg); transform:rotate(360deg); } } @keyframesrotate-windmill{ 0%{ -webkit-transform:rotate(0); transform:rotate(0); } 100%{ -webkit-transform:rotate(360deg); transform:rotate(360deg); } } @-webkit-keyframescd{ 0%{ background:#F5F5F5; } 50%{ background:#E1CB82; } 75%{ background:#F1F358; } 100%{ background:#FFFC00; } } @keyframescd{ 0%{ background:#F5F5F5; } 50%{ background:#E1CB82; } 75%{ background:#F1F358; } 100%{ background:#FFFC00; } } </style> </head> <body> <divclass="windmill"> <divclass="windmill-head"> <divclass="wrapperwrapper1"> <divclass="leafleaf1"></div> <divclass="leafleaf2"></div> </div> <divclass="wrapperwrapper2"> <divclass="leafleaf3"></div> <divclass="leafleaf4"></div> </div> </div> <divclass="windmill-pillar"></div> </div> </body> </html> 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。
【纯DOM+CSS3实现简单的小风车动画】相关文章：