溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么用HTML5制作3D愛心動畫

發(fā)布時間：2021-07-30 09:15:48 來源：億速云 閱讀：799 作者：chen 欄目：web開發(fā)

這篇文章主要講解了“怎么用HTML5制作3D愛心動畫”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用HTML5制作3D愛心動畫”吧！

　　誰說程序員不懂得浪漫，看看程序員是怎么浪漫的，今天小編在國外的網(wǎng)站上看到一個利用HTML5和CSS3制作的3D愛心動畫，在情人節(jié)時送給心愛的人，還是非常不錯的。當然了。背景我們可以用一些浪漫元素。如加上女朋友漂亮的照片。這樣可以制作一個廉價又很有意義的情人節(jié)禮物。大家可以點解DEMO來看看。先上效果圖：

怎么用HTML5制作3D愛心動畫

　　實現(xiàn)代碼如下：

　　html代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <div class=&rsquo;heart3d&rsquo;>  

  2. <div class=&rsquo;rib1&prime;></div>  

  3. <div class=&rsquo;rib2&prime;></div>  

  4. <div class=&rsquo;rib3&prime;></div>  

  5. <div class=&rsquo;rib4&prime;></div>  

  6. <div class=&rsquo;rib5&prime;></div>  

  7. <div class=&rsquo;rib6&prime;></div>  

  8. <div class=&rsquo;rib7&prime;></div>  

  9. <div class=&rsquo;rib8&prime;></div>  

  10. <div class=&rsquo;rib9&prime;></div>  

  11. <div class=&rsquo;rib10&prime;></div>  

  12. <div class=&rsquo;rib11&prime;></div>  

  13. <div class=&rsquo;rib12&prime;></div>  

  14. <div class=&rsquo;rib13&prime;></div>  

  15. <div class=&rsquo;rib14&prime;></div>  

  16. <div class=&rsquo;rib15&prime;></div>  

  17. <div class=&rsquo;rib16&prime;></div>  

  18. <div class=&rsquo;rib17&prime;></div>  

  19. <div class=&rsquo;rib18&prime;></div>  

  20. <div class=&rsquo;rib19&prime;></div>  

  21. <div class=&rsquo;rib20&prime;></div>  

  22. <div class=&rsquo;rib21&prime;></div>  

  23. <div class=&rsquo;rib22&prime;></div>  

  24. <div class=&rsquo;rib23&prime;></div>  

  25. <div class=&rsquo;rib24&prime;></div>  

  26. <div class=&rsquo;rib25&prime;></div>  

  27. <div class=&rsquo;rib26&prime;></div>  

  28. <div class=&rsquo;rib27&prime;></div>  

  29. <div class=&rsquo;rib28&prime;></div>  

  30. <div class=&rsquo;rib29&prime;></div>  

  31. <div class=&rsquo;rib30&prime;></div>  

  32. <div class=&rsquo;rib31&prime;></div>  

  33. <div class=&rsquo;rib32&prime;></div>  

  34. <div class=&rsquo;rib33&prime;></div>  

  35. <div class=&rsquo;rib34&prime;></div>  

  36. <div class=&rsquo;rib35&prime;></div>  

  37. <div class=&rsquo;rib36&prime;></div>  

  38. </div>  

　　這么多div，主要是構(gòu)造愛心的線條區(qū)域。

　　CSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

  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復(fù)制內(nèi)容到剪貼板

  1. @-webkit-keyframes spin {   

  2.   to {   

  3.     -webkit-transform: rotateY(360deg) rotateX(360deg);   

  4.     transform: rotateY(360deg) rotateX(360deg);   

  5.   }   

  6. }   

  7.   

  8. @keyframes spin {   

  9.   to {   

  10.     -webkit-transform: rotateY(360deg) rotateX(360deg);   

  11.     transform: rotateY(360deg) rotateX(360deg);   

  12.   }   

  13. }  

感謝各位的閱讀，以上就是“怎么用HTML5制作3D愛心動畫”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么用HTML5制作3D愛心動畫這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手