一款纯css3制作的2015年元旦雪人动画特效好代码教程

网络
愿我们努力拼搏，征战沙场，不忘初心，努力成为一个浑身充满铜臭味的有钱人。

　　在圣诞节或者是元旦的时候，爱编程小编给大家分享一款纯css3实现的雪人动画特效。该实例实现一个雪人跳动的特效，效果图如下：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <spanclass="text">lolwut<small>-@rsmswlln</small></span>
  2. <divclass="body">
  3. <divclass="hat">
  4. <divclass="ribbon">
  5. </div>
  6. </div>
  7. <divclass="face">
  8. </div>
  9. <divclass="scarf">
  10. </div>
  11. <divclass="right-arm">
  12. <divclass="hand">
  13. </div>
  14. </div>
  15. <divclass="left-arm">
  16. <divclass="hand">
  17. </div>
  18. </div>
  19. </div>
  20. <divclass="puddle">
  21. </div>

　　css代码：

CSS Code复制内容到剪贴板
  1. body{
  2. background:#c0392b;
  3. }
  4. .body{
  5. width:250px;
  6. height:250px;
  7. background:#ffffff;
  8. border-radius:50%;
  9. box-shadow:inset-20px-5px35pxrgba(0,0,0,0.2);
  10. position:absolute;
  11. rightright:0;
  12. left:0;
  13. margin:300pxauto;
  14. animation:jump1sinfinite;
  15. }
  16. .body:before{
  17. z-index:2;
  18. content:"";
  19. width:180px;
  20. height:180px;
  21. background:#ffffff;
  22. border-radius:50%;
  23. box-shadow:inset-10px-5px10pxrgba(0,0,0,0.2);
  24. position:relative;
  25. display:inline-block;
  26. top:-120px;
  27. left:25px;
  28. }
  29. .body:after{
  30. content:"";
  31. width:140px;
  32. height:140px;
  33. background:#ffffff;
  34. border-radius:50%;
  35. box-shadow:inset-10px-5px10pxrgba(0,0,0,0.2);
  36. position:relative;
  37. display:inline-block;
  38. top:-400px;
  39. left:20px;
  40. }
  41. .body>.hat{
  42. width:200px;
  43. height:15px;
  44. border-radius:50%;
  45. background-color:#111111;
  46. position:absolute;
  47. z-index:4;
  48. top:-200px;
  49. left:-15px;
  50. }
  51. .body>.hat:before{
  52. content:"";
  53. width:100px;
  54. height:65px;
  55. background-color:#111111;
  56. display:inline-block;
  57. position:relative;
  58. top:-55px;
  59. left:51px;
  60. }
  61. .body>.hat:after{
  62. z-index:5;
  63. content:"";
  64. display:inline-block;
  65. position:relative;
  66. top:-145px;
  67. left:51px;
  68. width:100px;
  69. height:5px;
  70. border-radius:50%;
  71. background-color:#2b2b2b;
  72. }
  73. .body>.hat>.ribbon{
  74. height:10px;
  75. width:100px;
  76. background-color:#6d2018;
  77. position:relative;
  78. top:-90px;
  79. left:51px;
  80. z-index:6;
  81. }
  82. .body>.face{
  83. z-index:3;
  84. width:12px;
  85. height:12px;
  86. background-color:#2c3e50;
  87. border-radius:50%;
  88. position:absolute;
  89. top:-170px;
  90. left:38px;
  91. }
  92. .body>.face:before{
  93. content:"";
  94. background-color:transparent;
  95. display:inline-block;
  96. position:relative;
  97. top:30px;
  98. left:-45px;
  99. transform:rotate(-15deg);
  100. border-top:12pxsolidtransparent;
  101. border-bottom:12pxsolidtransparent;
  102. border-right:40pxsolid#e67e22;
  103. }
  104. .body>.face:after{
  105. content:"";
  106. background-color:transparent;
  107. display:inline-block;
  108. position:relative;
  109. top:0;
  110. left:-46px;
  111. transform:rotate(-15deg);
  112. border-top:12pxsolidtransparent;
  113. border-right:40pxsolid#bf6516;
  114. }
  115. .body>.scarf{
  116. z-index:3;
  117. width:150px;
  118. height:30px;
  119. background-color:#2980b9;
  120. position:absolute;
  121. top:-110px;
  122. left:25px;
  123. transform:rotate(-15deg);
  124. border-radius:20%;
  125. }
  126. .body>.scarf:after{
  127. content:"";
  128. width:75px;
  129. height:30px;
  130. background-color:#2980b9;
  131. display:inline-block;
  132. position:relative;
  133. top:16px;
  134. left:80px;
  135. transform:rotate(85deg);
  136. border-radius:20%;
  137. }
  138. .body>.left-arm,
  139. .body.rightright-arm{
  140. z-index:7;
  141. width:100px;
  142. height:6px;
  143. background-color:#825a2c;
  144. position:absolute;
  145. top:10px;
  146. left:-20px;
  147. transform:rotate(-15deg);
  148. animation:rub-rightright0.5sinfinite;
  149. }
  150. .body>.left-arm>.hand,
  151. .body.rightright-arm>.hand{
  152. width:25px;
  153. height:6px;
  154. background-color:#825a2c;
  155. position:absolute;
  156. top:-32px;
  157. left:-60px;
  158. transform:rotate(75deg);
  159. }
  160. .body>.left-arm:after,
  161. .body.rightright-arm:after{
  162. content:"";
  163. width:75px;
  164. height:6px;
  165. background-color:#a87439;
  166. display:inline-block;
  167. position:relative;
  168. top:-24px;
  169. left:-70px;
  170. transform:rotate(25deg);
  171. }
  172. .body>.left-arm.left-arm,
  173. .body.rightright-arm.left-arm{
  174. background-color:#a87439;
  175. animation:rub-left0.5sinfinite;
  176. top:-15px;
  177. z-index:1;
  178. }
  179. .body>.left-arm.left-arm>.hand,
  180. .body.rightright-arm.left-arm>.hand{
  181. background-color:#a87439;
  182. top:-14px;
  183. transform:rotate(45deg);
  184. }
  185. .body>.left-arm.left-arm:after,
  186. .body.rightright-arm.left-arm:after{
  187. background-color:#825a2c;
  188. transform:rotate(5deg);
  189. top:-12px;
  190. left:-74px;
  191. }
  192. .puddle{
  193. z-index:-1;
  194. width:200px;
  195. height:100px;
  196. background:#2980b9;
  197. border-radius:50%;
  198. position:absolute;
  199. rightright:0;
  200. left:-50px;
  201. margin:500pxauto;
  202. }
  203. .puddle:after{
  204. content:"";
  205. width:120px;
  206. height:80px;
  207. display:inline-block;
  208. border-radius:50%;
  209. left:150px;
  210. position:relative;
  211. background-color:#2980b9;
  212. }
  213. .text{
  214. text-align:center;
  215. font-family:'Lobster',cursive;
  216. font-size:74px;
  217. display:inline-block;
  218. transform:rotate(-15deg);
  219. position:absolute;
  220. margin:50px30px;
  221. color:#ffffff;
  222. text-shadow:3px3px2pxrgba(0,0,0,0.5);
  223. }
  224. .text>small{
  225. font-size:20px;
  226. display:block;
  227. }
  228. @keyframesrub-left{
  229. 0%{
  230. margin-left:0px;
  231. margin-top:0;
  232. }
  233. 50%{
  234. margin-left:5px;
  235. margin-top:1px;
  236. }
  237. 100%{
  238. margin-left:0px;
  239. margin-top:0;
  240. }
  241. }
  242. @keyframesrub-rightright{
  243. 0%{
  244. margin-left:4px;
  245. }
  246. 50%{
  247. margin-left:0px;
  248. }
  249. 100%{
  250. margin-left:4px;
  251. }
  252. }
  253. @keyframesjump{
  254. 0%{
  255. margin:300pxauto;
  256. }
  257. 40%{
  258. margin:250pxauto;
  259. }
  260. 80%{
  261. margin:300pxauto;
  262. }
  263. }

到此这篇关于一款纯css3制作的2015年元旦雪人动画特效好代码教程就介绍到这了。永不放弃是你梦想实现的唯一秘诀。更多相关一款纯css3制作的2015年元旦雪人动画特效好代码教程内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！