cari

Rumah >hujung hadapan web >Tutorial H5 >Tutorial HTML5 untuk mencipta animasi cinta 3D, hadiah romantis untuk kemahiran tutorial girlfriend_html5 anda

Tutorial HTML5 untuk mencipta animasi cinta 3D, hadiah romantis untuk kemahiran tutorial girlfriend_html5 anda

WBOY
WBOYasal
2016-05-16 15:47:183801semak imbas

Siapa kata pengaturcara tidak tahu cara menjadi romantik. ., masih sangat bagus. Sudah tentu. Kita boleh menggunakan beberapa elemen romantis di latar belakang. Contohnya, tambahkan foto cantik teman wanita anda. Ini menjadikan hadiah Hari Valentine yang murah namun bermakna. Anda boleh klik pada DEMO untuk melihat. Pertama rendering:

Kod pelaksanaan adalah seperti berikut:

　kod html:

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

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

　　CSS代码：

Kod CSS复制内容到剪贴板
  1. .heart3d {   
  2.   kedudukan: mutlak;   
  3.   atas: 0;   
  4.   kanankanan: 0;   
  5.   bawahbawah: 0;   
  6.   kiri: 0;   
  7.   margin: auto;   
  8.   lebar: 100px;   
  9.   tinggi: 160px;   
  10.   -webkit-transform-style: preserve-3d;   
  11.   gaya-transform: preserve-3d;   
  12.   -webkit-animasi: putar 15s linier tak terhingga;   
  13.   animasi: pusing 15s linier tak terhingga;   
  14. }   
  15. .heart3d [class^="tulang rusuk"] {   
  16.   kedudukan: mutlak;   
  17.   lebar: 100px;   
  18.   tinggi: 160px;   
  19.   sempadan: pepejal #f22613;   
  20.   lebar sempadan: 1px 1px 0 0 ;   
  21.   sempadan-jejari: 50% 50% 0 / 40% 50% 0;   
  22. }   
  23. .heart3d [class$="1"] {   
  24.   -webkit-transform: rotateY(10deg) rotateZ(45deg) translateX(30px);   
  25.   transformasi: putar Y(10deg) putarZ(45deg) terjemahX(30px);   
  26. }   
  27. .heart3d [class$="2"] {   
  28.   -webkit-transform: rotateY(20deg) rotateZ(45deg) translateX(30px);   
  29.   transformasi: putarY(20deg) putarZ(45deg) terjemahX(30px);   
  30. }   
  31. .heart3d [class$="3"] {   
  32.   -webkit-transform: rotateY(30deg) rotateZ(45deg) translateX(30px);   
  33.   transformasi: putarY(30deg) putarZ(45deg) terjemahX(30px);   
  34. }  
  35. .heart3d [class$="4"] {   
  36.   -webkit-transform: rotateY(40deg) rotateZ(45deg) translateX(30px);   
  37.   transformasi: putarY(40deg) putarZ(45deg) terjemahX(30px);   
  38. }   
  39. .heart3d [class$="5"] {   
  40.   -webkit-transform: rotateY(50deg) rotateZ(45deg) translateX(30px);   
  41.   transformasi: putarY(50deg) putarZ(45deg) terjemahX(30px);   
  42. }   
  43. .heart3d [class$="6"] {   
  44.   -webkit-transform: rotateY(60deg) rotateZ(45deg) translateX(30px);   
  45.   transformasi: putarY(60deg) putarZ(45deg) terjemahX(30px);   
  46. }   
  47. .heart3d [class$="7"] {   
  48.   -webkit-transform: rotateY(70deg) rotateZ(45deg) translateX(30px);   
  49.   transformasi: putarY(70deg) putarZ(45deg) terjemahX(30px);   
  50. }   
  51. .heart3d [class$="8"] {   
  52.   -webkit-transform: rotateY(80deg) rotateZ(45deg) translateX(30px);   
  53.   transformasi: putarY(80deg) putarZ(45deg) terjemahX(30px);   
  54. }   
  55. .heart3d [class$="9"] {   
  56.   -webkit-transform: rotateY(90deg) rotateZ(45deg) translateX(30px);   
  57.   transformasi: putarY(90deg) putarZ(45deg) terjemahX(30px);   
  58. }   
  59. .heart3d [class$="10"] {   
  60.   -webkit-transform: rotateY(100deg) rotateZ(45deg) translateX(30px);   
  61.   transformasi: putarY(100deg) putarZ(45deg) terjemahX(30px);   
  62. }   
  63. .heart3d [class$="11"] {   
  64.   -webkit-transform: rotateY(110deg) rotateZ(45deg) translateX(30px);   
  65.   transformasi: putarY(110deg) putarZ(45deg) terjemahX(30px);   
  66. }   
  67. .heart3d [class$="12"] {   
  68.   -webkit-transform: rotateY(120deg) rotateZ(45deg) translateX(30px);   
  69.   transformasi: putarY(120deg) putarZ(45deg) terjemahX(30px);   
  70. }  
  71. .heart3d [class$="13"] {   
  72.   -webkit-transform: rotateY(130deg) rotateZ(45deg) translateX(30px);   
  73.   transformasi: putarY(130deg) putarZ(45deg) terjemahX(30px);   
  74. }   
  75. .heart3d [class$="14"] {   
  76.   -webkit-transform: rotateY(140deg) rotateZ(45deg) translateX(30px);   
  77.   transformasi: putarY(140deg) putarZ(45deg) terjemahX(30px);   
  78. }   
  79. .heart3d [class$="15"] {   
  80.   -webkit-transform: rotateY(150deg) rotateZ(45deg) translateX(30px);   
  81.   transformasi: putarY(150deg) putarZ(45deg) terjemahX(30px);   
  82. }   
  83. .heart3d [class$="16"] {   
  84.   -webkit-transform: rotateY(160deg) rotateZ(45deg) translateX(30px);   
  85.   transformasi: putarY(160deg) putarZ(45deg) terjemahX(30px);   
  86. }   
  87. .heart3d [class$="17"] {   
  88.   -webkit-transform: rotateY(170deg) rotateZ(45deg) translateX(30px);   
  89.   transformasi: putarY(170deg) putarZ(45deg) terjemahX(30px);   
  90. }   
  91. .heart3d [class$="18"] {   
  92.   -webkit-transform: rotateY(180deg) rotateZ(45deg) translateX(30px);   
  93.   transformasi: putarY(180deg) putarZ(45deg) terjemahX(30px);   
  94. }   
  95. .heart3d [class$="19"] {   
  96.   -webkit-transform: rotateY(190deg) rotateZ(45deg) translateX(30px);   
  97.   transformasi: putarY(190deg) putarZ(45deg) terjemahX(30px);   
  98. }   
  99. .heart3d [class$="20"] {   
  100.   -webkit-transform: rotateY(200deg) rotateZ(45deg) translateX(30px);   
  101.   transformasi: putarY(200deg) putarZ(45deg) terjemahX(30px);   
  102. }   
  103. .heart3d [class$="21"] {   
  104.   -webkit-transform: rotateY(210deg) rotateZ(45deg) translateX(30px);   
  105.   transformasi: putarY(210deg) putarZ(45deg) terjemahX(30px);   
  106. }  
  107. .heart3d [class$="22"] {   
  108.   -webkit-transform: rotateY(220deg) rotateZ(45deg) translateX(30px);   
  109.   transformasi: putarY(220deg) putarZ(45deg) terjemahX(30px);   
  110. }   
  111. .heart3d [class$="23"] {   
  112.   -webkit-transform: rotateY(230deg) rotateZ(45deg) translateX(30px);   
  113.   transformasi: putarY(230deg) putarZ(45deg) terjemahX(30px);   
  114. }   
  115. .heart3d [class$="24"] {   
  116.   -webkit-transform: rotateY(240deg) rotateZ(45deg) translateX(30px);   
  117.   transformasi: putarY(240deg) putarZ(45deg) terjemahX(30px);   
  118. }   
  119. .heart3d [class$="25"] {   
  120.   -webkit-transform: rotateY(250deg) rotateZ(45deg) translateX(30px);   
  121.   transformasi: putarY(250deg) putarZ(45deg) terjemahX(30px);   
  122. }   
  123. .heart3d [class$="26"] {   
  124.   -webkit-transform: rotateY(260deg) rotateZ(45deg) translateX(30px);   
  125.   transformasi: putarY(260deg) putarZ(45deg) terjemahX(30px);   
  126. }   
  127. .heart3d [class$="27"] {   
  128.   -webkit-transform: rotateY(270deg) rotateZ(45deg) translateX(30px);   
  129.   transformasi: putarY(270deg) putarZ(45deg) terjemahX(30px);   
  130. }   
  131. .heart3d [class$="28"] {   
  132.   -webkit-transform: rotateY(280deg) rotateZ(45deg) translateX(30px);   
  133.   transformasi: putarY(280deg) putarZ(45deg) terjemahX(30px);   
  134. }   
  135. .heart3d [class$="29"] {   
  136.   -webkit-transform: rotateY(290deg) rotateZ(45deg) translateX(30px);   
  137.   transformasi: putarY(290deg) putarZ(45deg) terjemahX(30px);   
  138. }   
  139. .heart3d [class$="30"] {   
  140.   -webkit-transform: rotateY(300deg) rotateZ(45deg) translateX(30px);   
  141.   transformasi: putarY(300deg) putarZ(45deg) terjemahX(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.   bis {   
  3.     -webkit-transform: rotateY(360deg) rotateX(360deg);   
  4.     transformieren: rotateY(360deg) rotateX(360deg);   
  5.   }   
  6. }   
  7.   
  8. @keyframes spin {   
  9.   bis {   
  10.     -webkit-transform: rotateY(360deg) rotateX(360deg);   
  11.     transformieren: rotateY(360deg) rotateX(360deg);   
  12.   }   
  13. }  

Das Obige ist der 3D-Liebesanimationseffekt, der durch HTML-Code und CSS-Code erzielt wird, und kann versuchen, eine weitere Freundschaftsfähigkeit zu erlernen. Ich hoffe, dass er allen weiterhelfen kann an Script House. Wir werden versuchen, weitere hervorragende Artikel zu veröffentlichen.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Kemahiran tutorial jam lukisan HTML5 animation_html5Artikel seterusnya：Kemahiran tutorial jam lukisan HTML5 animation_html5

Artikel berkaitan

Lihat lagi