纯DOM+CSS3如何实现简单的小风车动画

网络
路上的杨柳依然神彩奕奕的低垂着黄绿色的发丝，好像冬天的降温没带给她们多少伤害。我倒感受到她们内心的寒冷，叶子摸着十分冰冷，也缺少了昔日的水分。冬天的到来，摧残了多少无辜的生命，又演绎了多少生命的童话。

用CSS3实现了一个小风车的效果，转转转，挺简单。

效果

代码

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  4. <head>
  5. <metacharset="UTF-8">
  6. <title>小风车-转啊转</title>
  7. <styletype="text/css">
  8. html{
  9. font-size:10px;
  10. }
  12. html*{
  13. -webkit-box-sizing:border-box;
  14. box-sizing:border-box;
  15. }
  17. .windmill{
  18. width:25rem;
  19. min-height:30rem;
  20. height:auto;
  21. margin:3remauto;
  22. display:-webkit-box;
  23. display:-webkit-flex;
  24. display:-ms-flexbox;
  25. display:flex;
  26. -webkit-box-orient:vertical;
  27. -webkit-box-direction:normal;
  28. -webkit-flex-direction:column;
  29. -ms-flex-direction:column;
  30. flex-direction:column;
  31. -webkit-box-pack:start;
  32. -webkit-justify-content:flex-start;
  33. -ms-flex-pack:start;
  34. justify-content:flex-start;
  35. -webkit-box-align:center;
  36. -webkit-align-items:center;
  37. -ms-flex-align:center;
  38. align-items:center;
  39. }
  40. /*头部*/
  42. .windmill-head{
  43. height:20rem;
  44. width:20rem;
  45. display:-webkit-box;
  46. display:-webkit-flex;
  47. display:-ms-flexbox;
  48. display:flex;
  49. -webkit-box-orient:horizontal;
  50. -webkit-box-direction:normal;
  51. -webkit-flex-direction:row;
  52. -ms-flex-direction:row;
  53. flex-direction:row;
  54. -webkit-flex-wrap:wrap;
  55. -ms-flex-wrap:wrap;
  56. flex-wrap:wrap;
  57. -webkit-justify-content:space-around;
  58. -ms-flex-pack:distribute;
  59. justify-content:space-around;
  60. -webkit-align-content:space-around;
  61. -ms-flex-line-pack:distribute;
  62. align-content:space-around;
  63. -webkit-transform:translateZ(0);
  64. transform:translateZ(0);
  65. -webkit-animation:rotate-windmill1slinearinfinite;
  66. animation:rotate-windmill1slinearinfinite;
  67. border-radius:50%;
  68. border:0.1remsolid#DBE526;
  69. -webkit-transition:border-radius2slinear;
  70. transition:border-radius2slinear;
  71. }
  72. /*两片叶子的包裹层*/
  74. .wrapper{
  75. display:-webkit-box;
  76. display:-webkit-flex;
  77. display:-ms-flexbox;
  78. display:flex;
  79. -webkit-box-orient:vertical;
  80. -webkit-box-direction:normal;
  81. -webkit-flex-direction:column;
  82. -ms-flex-direction:column;
  83. flex-direction:column;
  84. -webkit-flex-wrap:wrap;
  85. -ms-flex-wrap:wrap;
  86. flex-wrap:wrap;
  87. -webkit-box-pack:justify;
  88. -webkit-justify-content:space-between;
  89. -ms-flex-pack:justify;
  90. justify-content:space-between;
  91. height:135%;
  92. width:50%;
  93. -webkit-box-align:center;
  94. -webkit-align-items:center;
  95. -ms-flex-align:center;
  96. align-items:center;
  97. }
  98. /*包裹层对称*/
  100. .wrapper1{
  101. -webkit-transform:rotate(-45deg)translate(5rem);
  102. transform:rotate(-45deg)translate(5rem);
  103. -webkit-transform-origin:rightcenter;
  104. transform-origin:rightcenter;
  105. }
  107. .wrapper2{
  108. -webkit-transform:rotate(45deg)translate(-5rem);
  109. transform:rotate(45deg)translate(-5rem);
  110. -webkit-transform-origin:leftcenter;
  111. transform-origin:leftcenter;
  112. }
  113. /*扇叶的形状及底色*/
  115. .leaf{
  116. height:13rem;
  117. width:5rem;
  118. border-radius:5rem/5rem5rem20rem20rem;
  119. -webkit-box-shadow:0.1rem0.1rem1remrgba(64,56,56,.35)inset,0.2rem0.2rem0.05remrgba(0,0,0,.65);
  120. box-shadow:0.1rem0.1rem1remrgba(64,56,56,.35)inset,0.2rem0.2rem0.05remrgba(0,0,0,.65);
  121. }
  123. .leaf1{
  124. border:0.05remsolid#D1A23A;
  125. -webkit-transform:rotate(0deg)translate(0);
  126. transform:rotate(0deg)translate(0);
  127. background-color:rgba(230,0,100,5);
  128. background:-webkit-gradient(linear,lefttop,leftbottom,from(#D02CE4),to(#f5f5f5));
  129. background:-webkit-linear-gradient(top,#D02CE4,#f5f5f5);
  130. background:linear-gradient(180deg,#D02CE4,#f5f5f5);
  131. -webkit-transition:background2slinear;
  132. transition:background2slinear;
  133. }
  135. .leaf2{
  136. border:0.05remsolid#49D13A;
  137. background-color:rgba(230,0,150,5);
  138. -webkit-transform:rotate(-180deg)translate(0);
  139. transform:rotate(-180deg)translate(0);
  140. background:-webkit-gradient(linear,lefttop,leftbottom,from(#B91717),to(#f5f5f5));
  141. background:-webkit-linear-gradient(top,#B91717,#f5f5f5);
  142. background:linear-gradient(180deg,#B91717,#f5f5f5);
  143. -webkit-transition:background2slinear2s;
  144. transition:background2slinear2s;
  145. }
  147. .leaf3{
  148. border:0.05remsolid#C6079D;
  149. background-color:rgba(130,0,100,5);
  150. -webkit-transform:rotate(0deg)translate(0);
  151. transform:rotate(0deg)translate(0);
  152. background:-webkit-gradient(linear,lefttop,leftbottom,from(#1CBA9F),to(#f5f5f5));
  153. background:-webkit-linear-gradient(top,#1CBA9F,#f5f5f5);
  154. background:linear-gradient(180deg,#1CBA9F,#f5f5f5);
  155. -webkit-transition:background2slinear;
  156. transition:background2slinear;
  157. -webkit-transition:background2slinear4s;
  158. transition:background2slinear4s;
  159. }
  161. .leaf4{
  162. border:0.05remsolid#3A5FD1;
  163. background-color:rgba(230,100,100,5);
  164. -webkit-transform:rotate(-180deg)translate(0);
  165. transform:rotate(-180deg)translate(0);
  166. background:-webkit-gradient(linear,lefttop,leftbottom,from(#335642),to(#f5f5f5));
  167. background:-webkit-linear-gradient(top,#335642,#f5f5f5);
  168. background:linear-gradient(180deg,#335642,#f5f5f5);
  169. -webkit-transition:background2slinear6s;
  170. transition:background2slinear6s;
  171. }
  172. /*尾部*/
  174. .windmill-pillar{
  175. -webkit-transform:translateZ(0);
  176. transform:translateZ(0);
  177. width:3rem;
  178. height:20rem;
  179. background:#FFF;
  180. -webkit-transform:translateY(-52%);
  181. transform:translateY(-52%);
  182. position:relative;
  183. z-index:-2;
  184. border-radius:50%50%00;
  185. -webkit-animation:cd2slinearinfinite;
  186. animation:cd2slinearinfinite;
  187. }
  189. @-webkit-keyframesrotate-windmill{
  190. 0%{
  191. -webkit-transform:rotate(0);
  192. transform:rotate(0);
  193. }
  194. 100%{
  195. -webkit-transform:rotate(360deg);
  196. transform:rotate(360deg);
  197. }
  198. }
  200. @keyframesrotate-windmill{
  201. 0%{
  202. -webkit-transform:rotate(0);
  203. transform:rotate(0);
  204. }
  205. 100%{
  206. -webkit-transform:rotate(360deg);
  207. transform:rotate(360deg);
  208. }
  209. }
  211. @-webkit-keyframescd{
  212. 0%{
  213. background:#F5F5F5;
  214. }
  215. 50%{
  216. background:#E1CB82;
  217. }
  218. 75%{
  219. background:#F1F358;
  220. }
  221. 100%{
  222. background:#FFFC00;
  223. }
  224. }
  226. @keyframescd{
  227. 0%{
  228. background:#F5F5F5;
  229. }
  230. 50%{
  231. background:#E1CB82;
  232. }
  233. 75%{
  234. background:#F1F358;
  235. }
  236. 100%{
  237. background:#FFFC00;
  238. }
  239. }
  240. </style>
  241. </head>
  243. <body>
  244. <divclass="windmill">
  245. <divclass="windmill-head">
  246. <divclass="wrapperwrapper1">
  247. <divclass="leafleaf1"></div>
  248. <divclass="leafleaf2"></div>
  249. </div>
  250. <divclass="wrapperwrapper2">
  251. <divclass="leafleaf3"></div>
  252. <divclass="leafleaf4"></div>
  253. </div>
  254. </div>
  255. <divclass="windmill-pillar"></div>
  256. </div>
  257. </body>
  259. </html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例