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

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

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

效果

代码

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