搜尋

首頁 >web前端 >H5教程 >HTML5製作3D愛心動畫教學 獻給女友浪漫的禮物_html5教學技巧

HTML5製作3D愛心動畫教學 獻給女友浪漫的禮物_html5教學技巧

WBOY
WBOY原創
2016-05-16 15:47:183819瀏覽

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

　　實作程式碼如下：

　　html代碼：

XML/HTML Code複製內容到剪貼簿
  1. div class='heart3d'class='heart3d'class  
    3. div class='rib1′class='rib1′> div
  3. >   div class='rib2′class='rib2′
  4. div>   div class='rib33′class='rib3′
    5. >
  5. div>   div class='rib4′
    6. class
  6. ='rib4′ div>   div class
  7. ='rib557>class='rib557class='rib557class='rib55′div>  
    8. div class='rib6′class='rib6′div>  
  8. div class='rib777 class='rib77′ > div>  
  9. div class='rib87class='rib8′′ div>
    10.   
  10. div class='rib99′ div>  
  11. div class='rib1007class='rib100′ div>
  12.    div class='rib11117class='rib11117div
  13. >   div class='rib12′class='rib12′='rib12′
    14. div>   div class='rib133>class='rib133′div>  
  14. div class='rib14′class='rib14′='rib14′='rib14′
  15. div>   div class='rib1557>class
  16. ='rib15557 div>   div class
  17. ='rib16′class='rib16′='rib16′ div>  
  18. div class='rib1777div>  
  19. div class='rib188class='rib188div>  
    20. div class='rib199>class='rib199's> >div>  
  20. div class='rib20′class='rib20′ div>
  21.    div class='rib21′class='rib21′
    22. div
  22. >   div class='rib2222222222277='rib222222222222222222222:
    23. div
  23. >   div class='rib23′class='rib233′
  24. div>  
    25. div class='rib24′class ='rib24′
  25. >div>   div 
    26. class
  26. ='rib255>class='rib25555555553737373737分>>div>   div
    27.  class='rib26′class='rib26′ div>   div class='rib2777class='rib27777777777 div>  
  27. div class='rib2888class='rib2888′ div>  
  28. div class='rib29′class='rib29′′='rib29′
  29. div>   div class='rib3007class='rib30′
    30. div>   div class='rib31′
  30. class='rib31′
    31. div>   div 
  31. class='rib32′class='rib32′div>  
    32. div
  32.  class='rib33333>class='rib3333333333333337div>  
  33. div class='rib344>class='rib34′='rib34′>div>
    34.   
  34. div class='rib35′ > div>
    35.   
  35. div 
    36. class
='rib36′
class

='rib36′

='rib36′
>div
>   div>   這麼多div，主要是建構汽車的線條區域。 CSS代碼： CSS 代碼 將內容複製到剪切板
  1. .heart3d {   
  2.   位置：絕對；  
  3.   上方：0；   
  4.   右右邊：0；   
  5.   底部底部：0；   
  6.   左：0；   
  7.   邊距: 自動;   
  8. ;   ;   ;   ;   
  9. ;   ;   ;   ;
  10.   寬度
  11. : 100px
  12. ;   
    13. ;   
  14.   高度
  15. : 160px;   
    16. ;   
  16.   -webkit-transform-style: preserve-3d;      轉換樣式： preserve-3d；  
  17. -webkit-animation：旋轉 15 秒無限線性；      動畫：旋轉 15 秒無限線性；    }   
  18. .heart3d [class^="肋骨"] {      位置
  19. ：絕對；     寬度: 
    20. 100px
  20. ;   ;      高度: 
    21. 160px
  21. ;   ;   
  22.   
    23. 邊框
  23. ：實心 
  24.   邊框寬度: 
    25. 1px
  25.  
    26.   
  26. 邊框
    27. -半徑：50% 50% 0 / 40% 50% 0;   
  27. }   
    28. .heart3d [class$=
  28. "1"] {   
    29.   -webkit-transform: rotateY(10deg) rotateZ(45deg) translateX(
  29. 30px);   >   轉換： rotateY(10deg) rotateZ(45deg) translateX(
    30. 30px
  30. );   
  31. );    }   
  32. .heart3d [class$="2"] {   
  33.   -webkit-transform: rotateY(20deg) rotateZ(45deg) translateX(30px);   >   轉換： rotateY(20deg) rotateZ(45deg) translateX(
  34. 30px);   );    }    .heart3d [class$="3"] {      -webkit-transform: rotateY(30deg) rotateZ(45deg) translateX(30px);   >   轉換： rotateY(30deg) rotateZ(45deg) translateX(30px);   );    }  
  35. .heart3d [class$="4"] {   
  36.   -webkit-transform: rotateY(40deg) rotateZ(45deg) translateX(30px);   
  37.   轉換： rotateY(40deg) rotateZ(45deg) translateX(30px);   
  38. }   
  39. .heart3d [class$="5"] {   
  40.   -webkit-transform: rotateY(50deg) rotateZ(45deg) translateX(30px);   
  41.   轉換： rotateY(50deg) rotateZ(45deg) translateX(30px);   
  42. }   
  43. .heart3d [class$="6"] {   
  44.   -webkit-transform: rotateY(60deg) rotateZ(45deg) translateX(30px);   
  45.   轉換： rotateY(60deg) rotateZ(45deg) translateX(30px);   
  46. }   
  47. .heart3d [class$="7"] {   
  48.   -webkit-transform: rotateY(70deg) rotateZ(45deg) translateX(30px);   
  49.   轉換： rotateY(70deg) rotateZ(45deg) translateX(30px);   
  50. }   
  51. .heart3d [class$="8"] {   
  52.   -webkit-transform: rotateY(80deg) rotateZ(45deg) translateX(30px);   
  53.   轉換： rotateY(80deg) rotateZ(45deg) translateX(30px);   
  54. }   
  55. .heart3d [class$="9"] {   
  56.   -webkit-transform: rotateY(90deg) rotateZ(45deg) translateX(30px);   
  57.   轉換： rotateY(90deg) rotateZ(45deg) translateX(30px);   
  58. }   
  59. .heart3d [class$="10"] {   
  60.   -webkit-transform: rotateY(100deg) rotateZ(45deg) translateX(30px);   
  61.   轉換： rotateY(100deg) rotateZ(45deg) translateX(30px);   
  62. }   
  63. .heart3d [class$="11"] {   
  64.   -webkit-transform: rotateY(110deg) rotateZ(45deg) translateX(30px);   
  65.   轉換： rotateY(110deg) rotateZ(45deg) translateX(30px);   
  66. }   
  67. .heart3d [class$="12"] {   
  68.   -webkit-transform: rotateY(120deg) rotateZ(45deg) translateX(30px);   
  69.   轉換： rotateY(120deg) rotateZ(45deg) translateX(30px);   
  70. }  
  71. .heart3d [class$="13"] {   
  72.   -webkit-transform: rotateY(130deg) rotateZ(45deg) translateX(30px);   
  73.   轉換： rotateY(130deg) rotateZ(45deg) translateX(30px);   
  74. }   
  75. .heart3d [class$="14"] {   
  76.   -webkit-transform: rotateY(140deg) rotateZ(45deg) translateX(30px);   
  77.   轉換： rotateY(140deg) rotateZ(45deg) translateX(30px);   
  78. }   
  79. .heart3d [class$="15"] {   
  80.   -webkit-transform: rotateY(150deg) rotateZ(45deg) translateX(30px);   
  81.   轉換： rotateY(150deg) rotateZ(45deg) translateX(30px);   
  82. }   
  83. .heart3d [class$="16"] {   
  84.   -webkit-transform: rotateY(160deg) rotateZ(45deg) translateX(30px);   
  85.   轉換： rotateY(160deg) rotateZ(45deg) translateX(30px);   
  86. }   
  87. .heart3d [class$="17"] {   
  88.   -webkit-transform: rotateY(170deg) rotateZ(45deg) translateX(30px);   
  89.   轉換： rotateY(170deg) rotateZ(45deg) translateX(30px);   
  90. }   
  91. .heart3d [class$="18"] {   
  92.   -webkit-transform: rotateY(180deg) rotateZ(45deg) translateX(30px);   
  93.   轉換： rotateY(180deg) rotateZ(45deg) translateX(30px);   
  94. }   
  95. .heart3d [class$="19"] {   
  96.   -webkit-transform: rotateY(190deg) rotateZ(45deg) translateX(30px);   
  97.   轉換： rotateY(190deg) rotateZ(45deg) translateX(30px);   
  98. }   
  99. .heart3d [class$="20"] {   
  100.   -webkit-transform: rotateY(200deg) rotateZ(45deg) translateX(30px);   
  101.   轉換： rotateY(200deg) rotateZ(45deg) translateX(30px);   
  102. }   
  103. .heart3d [class$="21"] {   
  104.   -webkit-transform: rotateY(210deg) rotateZ(45deg) translateX(30px);   
  105.   轉換： rotateY(210deg) rotateZ(45deg) translateX(30px);   
  106. }  
  107. .heart3d [class$="22"] {   
  108.   -webkit-transform: rotateY(220deg) rotateZ(45deg) translateX(30px);   
  109.   轉換： rotateY(220deg) rotateZ(45deg) translateX(30px);   
  110. }   
  111. .heart3d [class$="23"] {   
  112.   -webkit-transform: rotateY(230deg) rotateZ(45deg) translateX(30px);   
  113.   轉換： rotateY(230deg) rotateZ(45deg) translateX(30px);   
  114. }   
  115. .heart3d [class$="24"] {   
  116.   -webkit-transform: rotateY(240deg) rotateZ(45deg) translateX(30px);   
  117.   轉換： rotateY(240deg) rotateZ(45deg) translateX(30px);   
  118. }   
  119. .heart3d [class$="25"] {   
  120.   -webkit-transform: rotateY(250deg) rotateZ(45deg) translateX(30px);   
  121.   轉換： rotateY(250deg) rotateZ(45deg) translateX(30px);   
  122. }   
  123. .heart3d [class$="26"] {   
  124.   -webkit-transform: rotateY(260deg) rotateZ(45deg) translateX(30px);   
  125.   轉換： rotateY(260deg) rotateZ(45deg) translateX(30px);   
  126. }   
  127. .heart3d [class$="27"] {   
  128.   -webkit-transform: rotateY(270deg) rotateZ(45deg) translateX(30px);   
  129.   轉換： rotateY(270deg) rotateZ(45deg) translateX(30px);   
  130. }   
  131. .heart3d [class$="28"] {   
  132.   -webkit-transform: rotateY(280deg) rotateZ(45deg) translateX(30px);   
  133.   轉換： rotateY(280deg) rotateZ(45deg) translateX(30px);   
  134. }   
  135. .heart3d [class$="29"] {   
  136.   -webkit-transform: rotateY(290deg) rotateZ(45deg) translateX(30px);   
  137.   轉換： rotateY(290deg) rotateZ(45deg) translateX(30px);   
  138. }   
  139. .heart3d [class$="30"] {   
  140.   -webkit-transform: rotateY(300deg) rotateZ(45deg) translateX(30px);   
  141.   轉換： rotateY(300deg) rotateZ(45deg) translateX(30px);   
  142. }  
  143. .heart3d [class$="31"] {   
  144.   -webkit-transform: rotateY(310deg) rotateZ(45deg) translateX(30px);   
  145.   轉換： rotateY(310deg) rotateZ(45deg) translateX(30px);   
  146. }   
  147. .heart3d [class$="32"] {   
  148.   -webkit-transform: rotateY(320deg) rotateZ(45deg) translateX(30px);   
  149.   轉換： rotateY(320deg) rotateZ(45deg) translateX(30px);   
  150. }   
  151. .heart3d [class$="33"] {   
  152.   -webkit-transform: rotateY(330deg) rotateZ(45deg) translateX(30px);   
  153.   轉換： rotateY(330deg) rotateZ(45deg) translateX(30px);   
  154. }   
  155. .heart3d [class$="34"] {   
  156.   -webkit-transform: rotateY(340deg) rotateZ(45deg) translateX(30px);   
  157.   轉換： rotateY(340deg) rotateZ(45deg) translateX(30px);   
  158. }   
  159. .heart3d [class$="35"] {   
  160.   -webkit-transform: rotateY(350deg) rotateZ(45deg) translateX(30px);   
  161.   轉換： rotateY(350deg) rotateZ(45deg) translateX(30px);   
  162. }   
  163. .heart3d [class$="36"] {   
  164.   -webkit-transform: rotateY(360deg) rotateZ(45deg) translateX(30px);   
  165.   轉換： rotateY(360deg) rotateZ(45deg) translateX(30px);   
  166. }  

對這些線條進行渲染，從而產生3D的視覺效果。

然後定義了一組名稱為spin的HTML5動畫：

CSS 代碼 將內容複製到剪切板
  1. @-webkit-keyframes 旋轉 {   
  2.   至 {   
  3.     -webkit-transform：旋轉Y（360度）旋轉X（360度）；  
  4.     轉換：旋轉Y（360度）旋轉X（360度）；  
  5.   }   
  6. }   
  7.   
  8. @keyframes 旋轉 {   
  9.   至 {   
  10.     -webkit-transform：旋轉Y（360度）旋轉X（360度）；  
  11.     轉換：旋轉Y（360度）旋轉X（360度）；  
  12.   }   
  13. }  

上記は HTML コードと CSS コードによって実現される 3D の愛のアニメーション効果です。ロマンチックな若い男性は、それを学んで別の友情スキルを身につけることができます。引き続きご注目ください。より優れた記事を共有できるように努めます。

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：html5繪製時鐘動畫_html5教學技巧下一篇：html5繪製時鐘動畫_html5教學技巧

相關文章

看更多