欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

HTML5制作3D爱心动画教程 献给女友浪漫的礼物_html5教程技巧

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

HTML5制作3D爱心动画教程 献给女友浪漫的礼物_html5教程技巧

　　实现代码如下：

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. div class=’heart3d’>
  2. div class=’rib1′>div>
  3. div class=’rib2′>div>
  4. div class=’rib3′>div>
  5. div class=’rib4′>div>
  6. div class=’rib5′>div>
  7. div class=’rib6′>div>
  8. div class=’rib7′>div>
  9. div class=’rib8′>div>
  10. div class=’rib9′>div>
  11. div class=’rib10′>div>
  12. div class=’rib11′>div>
  13. div class=’rib12′>div>
  14. div class=’rib13′>div>
  15. div class=’rib14′>div>
  16. div class=’rib15′>div>
  17. div class=’rib16′>div>
  18. div class=’rib17′>div>
  19. div class=’rib18′>div>
  20. div class=’rib19′>div>
  21. div class=’rib20′>div>
  22. div class=’rib21′>div>
  23. div class=’rib22′>div>
  24. div class=’rib23′>div>
  25. div class=’rib24′>div>
  26. div class=’rib25′>div>
  27. div class=’rib26′>div>
  28. div class=’rib27′>div>
  29. div class=’rib28′>div>
  30. div class=’rib29′>div>
  31. div class=’rib30′>div>
  32. div class=’rib31′>div>
  33. div class=’rib32′>div>
  34. div class=’rib33′>div>
  35. div class=’rib34′>div>
  36. div class=’rib35′>div>
  37. div class=’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: spin 15s infinite linear;
  13. animation: spin 15s infinite linear;
  14. }
  15. .heart3d [class^="rib"] {
  16. position: absolute;
  17. width: 100px;
  18. height: 160px;
  19. border: solid #f22613;
  20. border-width: 1px 1px 0 0;
  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-keyframes spin {
  2. to {
  3. -webkit-transform: rotateY(360deg) rotateX(360deg);
  4. transform: rotateY(360deg) rotateX(360deg);
  5. }
  6. }
  8. @keyframes spin {
  9. to {
  10. -webkit-transform: rotateY(360deg) rotateX(360deg);
  11. transform: rotateY(360deg) rotateX(360deg);
  12. }
  13. }

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

相关标签： html5动画 html5动画制作

上一篇： JQplot的折线图 图示_html/css_WEB-ITnose

下一篇： 使用h5 canvas实现时钟的动态效果

推荐阅读