HTML5制作3D爱心动画好代码教程 献给女友浪漫的礼物

网络
秋天是金灿灿的丰收，秋天是沉甸甸的硕果，秋天是让人满载而归的欢笑和欣喜。

　　谁说程序员不懂得浪漫，看看程序员是怎么浪漫的，今天小编在国外的网站上看到一个利用HTML5和CSS3制作的3D爱心动画，在情人节时送给心爱的人，还是非常不错的。当然了。背景我们可以用一些浪漫元素。如加上女朋友漂亮的照片。这样可以制作一个廉价又很有意义的情人节礼物。大家可以点解DEMO来看看。先上效果图：

　　实现代码如下：

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <divclass=’heart3d’>
  2. <divclass=’rib1′></div>
  3. <divclass=’rib2′></div>
  4. <divclass=’rib3′></div>
  5. <divclass=’rib4′></div>
  6. <divclass=’rib5′></div>
  7. <divclass=’rib6′></div>
  8. <divclass=’rib7′></div>
  9. <divclass=’rib8′></div>
  10. <divclass=’rib9′></div>
  11. <divclass=’rib10′></div>
  12. <divclass=’rib11′></div>
  13. <divclass=’rib12′></div>
  14. <divclass=’rib13′></div>
  15. <divclass=’rib14′></div>
  16. <divclass=’rib15′></div>
  17. <divclass=’rib16′></div>
  18. <divclass=’rib17′></div>
  19. <divclass=’rib18′></div>
  20. <divclass=’rib19′></div>
  21. <divclass=’rib20′></div>
  22. <divclass=’rib21′></div>
  23. <divclass=’rib22′></div>
  24. <divclass=’rib23′></div>
  25. <divclass=’rib24′></div>
  26. <divclass=’rib25′></div>
  27. <divclass=’rib26′></div>
  28. <divclass=’rib27′></div>
  29. <divclass=’rib28′></div>
  30. <divclass=’rib29′></div>
  31. <divclass=’rib30′></div>
  32. <divclass=’rib31′></div>
  33. <divclass=’rib32′></div>
  34. <divclass=’rib33′></div>
  35. <divclass=’rib34′></div>
  36. <divclass=’rib35′></div>
  37. <divclass=’rib36′></div>
  38. </div>

　　这么多div，主要是构造爱心的线条区域。

　　CSS代码：

CSS Code复制内容到剪贴板
  1. .heart3d{
  2. position:absolute;
  3. top:0;
  4. rightright:0;
  5. bottombottom:0;
  6. left:0;
  7. margin:auto;
  8. width:100px;
  9. height:160px;
  10. -webkit-transform-style:preserve-3d;
  11. transform-style:preserve-3d;
  12. -webkit-animation:spin15sinfinitelinear;
  13. animation:spin15sinfinitelinear;
  14. }
  15. .heart3d[class^="rib"]{
  16. position:absolute;
  17. width:100px;
  18. height:160px;
  19. border:solid#f22613;
  20. border-width:1px1px00;
  21. border-radius:50%50%0/40%50%0;
  22. }
  23. .heart3d[class$="1"]{
  24. -webkit-transform:rotateY(10deg)rotateZ(45deg)translateX(30px);
  25. transform:rotateY(10deg)rotateZ(45deg)translateX(30px);
  26. }
  27. .heart3d[class$="2"]{
  28. -webkit-transform:rotateY(20deg)rotateZ(45deg)translateX(30px);
  29. transform:rotateY(20deg)rotateZ(45deg)translateX(30px);
  30. }
  31. .heart3d[class$="3"]{
  32. -webkit-transform:rotateY(30deg)rotateZ(45deg)translateX(30px);
  33. transform:rotateY(30deg)rotateZ(45deg)translateX(30px);
  34. }
  35. .heart3d[class$="4"]{
  36. -webkit-transform:rotateY(40deg)rotateZ(45deg)translateX(30px);
  37. transform:rotateY(40deg)rotateZ(45deg)translateX(30px);
  38. }
  39. .heart3d[class$="5"]{
  40. -webkit-transform:rotateY(50deg)rotateZ(45deg)translateX(30px);
  41. transform:rotateY(50deg)rotateZ(45deg)translateX(30px);
  42. }
  43. .heart3d[class$="6"]{
  44. -webkit-transform:rotateY(60deg)rotateZ(45deg)translateX(30px);
  45. transform:rotateY(60deg)rotateZ(45deg)translateX(30px);
  46. }
  47. .heart3d[class$="7"]{
  48. -webkit-transform:rotateY(70deg)rotateZ(45deg)translateX(30px);
  49. transform:rotateY(70deg)rotateZ(45deg)translateX(30px);
  50. }
  51. .heart3d[class$="8"]{
  52. -webkit-transform:rotateY(80deg)rotateZ(45deg)translateX(30px);
  53. transform:rotateY(80deg)rotateZ(45deg)translateX(30px);
  54. }
  55. .heart3d[class$="9"]{
  56. -webkit-transform:rotateY(90deg)rotateZ(45deg)translateX(30px);
  57. transform:rotateY(90deg)rotateZ(45deg)translateX(30px);
  58. }
  59. .heart3d[class$="10"]{
  60. -webkit-transform:rotateY(100deg)rotateZ(45deg)translateX(30px);
  61. transform:rotateY(100deg)rotateZ(45deg)translateX(30px);
  62. }
  63. .heart3d[class$="11"]{
  64. -webkit-transform:rotateY(110deg)rotateZ(45deg)translateX(30px);
  65. transform:rotateY(110deg)rotateZ(45deg)translateX(30px);
  66. }
  67. .heart3d[class$="12"]{
  68. -webkit-transform:rotateY(120deg)rotateZ(45deg)translateX(30px);
  69. transform:rotateY(120deg)rotateZ(45deg)translateX(30px);
  70. }
  71. .heart3d[class$="13"]{
  72. -webkit-transform:rotateY(130deg)rotateZ(45deg)translateX(30px);
  73. transform:rotateY(130deg)rotateZ(45deg)translateX(30px);
  74. }
  75. .heart3d[class$="14"]{
  76. -webkit-transform:rotateY(140deg)rotateZ(45deg)translateX(30px);
  77. transform:rotateY(140deg)rotateZ(45deg)translateX(30px);
  78. }
  79. .heart3d[class$="15"]{
  80. -webkit-transform:rotateY(150deg)rotateZ(45deg)translateX(30px);
  81. transform:rotateY(150deg)rotateZ(45deg)translateX(30px);
  82. }
  83. .heart3d[class$="16"]{
  84. -webkit-transform:rotateY(160deg)rotateZ(45deg)translateX(30px);
  85. transform:rotateY(160deg)rotateZ(45deg)translateX(30px);
  86. }
  87. .heart3d[class$="17"]{
  88. -webkit-transform:rotateY(170deg)rotateZ(45deg)translateX(30px);
  89. transform:rotateY(170deg)rotateZ(45deg)translateX(30px);
  90. }
  91. .heart3d[class$="18"]{
  92. -webkit-transform:rotateY(180deg)rotateZ(45deg)translateX(30px);
  93. transform:rotateY(180deg)rotateZ(45deg)translateX(30px);
  94. }
  95. .heart3d[class$="19"]{
  96. -webkit-transform:rotateY(190deg)rotateZ(45deg)translateX(30px);
  97. transform:rotateY(190deg)rotateZ(45deg)translateX(30px);
  98. }
  99. .heart3d[class$="20"]{
  100. -webkit-transform:rotateY(200deg)rotateZ(45deg)translateX(30px);
  101. transform:rotateY(200deg)rotateZ(45deg)translateX(30px);
  102. }
  103. .heart3d[class$="21"]{
  104. -webkit-transform:rotateY(210deg)rotateZ(45deg)translateX(30px);
  105. transform:rotateY(210deg)rotateZ(45deg)translateX(30px);
  106. }
  107. .heart3d[class$="22"]{
  108. -webkit-transform:rotateY(220deg)rotateZ(45deg)translateX(30px);
  109. transform:rotateY(220deg)rotateZ(45deg)translateX(30px);
  110. }
  111. .heart3d[class$="23"]{
  112. -webkit-transform:rotateY(230deg)rotateZ(45deg)translateX(30px);
  113. transform:rotateY(230deg)rotateZ(45deg)translateX(30px);
  114. }
  115. .heart3d[class$="24"]{
  116. -webkit-transform:rotateY(240deg)rotateZ(45deg)translateX(30px);
  117. transform:rotateY(240deg)rotateZ(45deg)translateX(30px);
  118. }
  119. .heart3d[class$="25"]{
  120. -webkit-transform:rotateY(250deg)rotateZ(45deg)translateX(30px);
  121. transform:rotateY(250deg)rotateZ(45deg)translateX(30px);
  122. }
  123. .heart3d[class$="26"]{
  124. -webkit-transform:rotateY(260deg)rotateZ(45deg)translateX(30px);
  125. transform:rotateY(260deg)rotateZ(45deg)translateX(30px);
  126. }
  127. .heart3d[class$="27"]{
  128. -webkit-transform:rotateY(270deg)rotateZ(45deg)translateX(30px);
  129. transform:rotateY(270deg)rotateZ(45deg)translateX(30px);
  130. }
  131. .heart3d[class$="28"]{
  132. -webkit-transform:rotateY(280deg)rotateZ(45deg)translateX(30px);
  133. transform:rotateY(280deg)rotateZ(45deg)translateX(30px);
  134. }
  135. .heart3d[class$="29"]{
  136. -webkit-transform:rotateY(290deg)rotateZ(45deg)translateX(30px);
  137. transform:rotateY(290deg)rotateZ(45deg)translateX(30px);
  138. }
  139. .heart3d[class$="30"]{
  140. -webkit-transform:rotateY(300deg)rotateZ(45deg)translateX(30px);
  141. transform:rotateY(300deg)rotateZ(45deg)translateX(30px);
  142. }
  143. .heart3d[class$="31"]{
  144. -webkit-transform:rotateY(310deg)rotateZ(45deg)translateX(30px);
  145. transform:rotateY(310deg)rotateZ(45deg)translateX(30px);
  146. }
  147. .heart3d[class$="32"]{
  148. -webkit-transform:rotateY(320deg)rotateZ(45deg)translateX(30px);
  149. transform:rotateY(320deg)rotateZ(45deg)translateX(30px);
  150. }
  151. .heart3d[class$="33"]{
  152. -webkit-transform:rotateY(330deg)rotateZ(45deg)translateX(30px);
  153. transform:rotateY(330deg)rotateZ(45deg)translateX(30px);
  154. }
  155. .heart3d[class$="34"]{
  156. -webkit-transform:rotateY(340deg)rotateZ(45deg)translateX(30px);
  157. transform:rotateY(340deg)rotateZ(45deg)translateX(30px);
  158. }
  159. .heart3d[class$="35"]{
  160. -webkit-transform:rotateY(350deg)rotateZ(45deg)translateX(30px);
  161. transform:rotateY(350deg)rotateZ(45deg)translateX(30px);
  162. }
  163. .heart3d[class$="36"]{
  164. -webkit-transform:rotateY(360deg)rotateZ(45deg)translateX(30px);
  165. transform:rotateY(360deg)rotateZ(45deg)translateX(30px);
  166. }

　　对这些线条进行渲染，以便其有3D的视觉效果。

　　然后定义了一组名称为spin的HTML5动画：

CSS Code复制内容到剪贴板
  1. @-webkit-keyframesspin{
  2. to{
  3. -webkit-transform:rotateY(360deg)rotateX(360deg);
  4. transform:rotateY(360deg)rotateX(360deg);
  5. }
  6. }
  8. @keyframesspin{
  9. to{
  10. -webkit-transform:rotateY(360deg)rotateX(360deg);
  11. transform:rotateY(360deg)rotateX(360deg);
  12. }
  13. }

　　以上就是HTML代码和CSS代码实现的3D爱心动画效果，浪漫的小伙子可以试着学习一下哦，又get一个交友技能，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。