Tutoriel HTML5 pour créer une animation d'amour 3D, un cadeau romantique pour votre petite amie_html5 compétences du didacticiel

Qui a dit que les programmeurs ne savaient pas être romantiques ? Voyons à quel point les programmeurs sont romantiques. Aujourd'hui, j'ai vu une animation d'amour 3D réalisée en HTML5 et CSS3 sur un site Web étranger, que j'offrirais à mon bien-aimé le jour de la Saint-Valentin. . , toujours très bon. Bien sûr. Nous pouvons utiliser quelques éléments romantiques en arrière-plan. Par exemple, ajoutez de belles photos de votre petite amie. Cela constitue un cadeau de Saint-Valentin peu coûteux mais significatif. Vous pouvez cliquer sur la DÉMO pour y jeter un œil. D'abord les rendus :

Le code d'implémentation est le suivant :

　code html :

Code XML/HTMLCopier le contenu dans le presse-papiers

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 classe='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代码：

Code CSS复制内容到剪贴板

1. .heart3d {   
2.   position : absolue ;   
3.   haut : 0 ;   
4.   droitedroite : 0 ;   
5.   basbas : 0 ;   
6.   gauche : 0 ;   
7.   marge : auto ;   
8.   largeur : 100px ;   
9.   hauteur : 160px ;   
10.   -webkit-transform-style : preserve-3d ;   
11.   transform-style : preserve-3d ;   
12.   -webkit-animation : tourner 15 s linéaire infini ;   
13.   animation : tournage 15 s linéaire infini ;   
14. }   
15. .heart3d [class^="côte"] {   
16.   position : absolue ;   
17.   largeur : 100px ;   
18.   hauteur : 160px ;   
19.   bordure : solide #f22613;   
20.   largeur de bordure : 1px 1px 0 0 ;   
21.   bordure-rayon : 50% 50% 0 / 40% 50% 0 ;   
22. }   
23. .heart3d [class$="1"] {   
24.   -webkit-transform : rotateY(10deg) rotateZ(45deg) translateX(30px);   
25.   transformer : rotateY(10deg) rotateZ(45deg) translateX(30px);   
26. }   
27. .heart3d [class$="2"] {   
28.   -webkit-transform : rotateY(20deg) rotateZ(45deg) translateX(30px);   
29.   transformer : rotateY(20deg) rotateZ(45deg) translateX(30px);   
30. }   
31. .heart3d [class$="3"] {   
32.   -webkit-transform : rotateY(30deg) rotateZ(45deg) translateX(30px);   
33.   transformer : rotateY(30deg) rotateZ(45deg) translateX(30px);   
34. }  
35. .heart3d [class$="4"] {   
36.   -webkit-transform : rotateY(40deg) rotateZ(45deg) translateX(30px);   
37.   transformer : rotateY(40deg) rotateZ(45deg) translateX(30px);   
38. }   
39. .heart3d [class$="5"] {   
40.   -webkit-transform : rotateY(50deg) rotateZ(45deg) translateX(30px);   
41.   transformer : rotateY(50deg) rotateZ(45deg) translateX(30px);   
42. }   
43. .heart3d [class$="6"] {   
44.   -webkit-transform : rotateY(60deg) rotateZ(45deg) translateX(30px);   
45.   transformer : rotateY(60deg) rotateZ(45deg) translateX(30px);   
46. }   
47. .heart3d [class$="7"] {   
48.   -webkit-transform : rotateY(70deg) rotateZ(45deg) translateX(30px);   
49.   transformer : rotateY(70deg) rotateZ(45deg) translateX(30px);   
50. }   
51. .heart3d [class$="8"] {   
52.   -webkit-transform : rotateY(80deg) rotateZ(45deg) translateX(30px);   
53.   transformer : rotateY(80deg) rotateZ(45deg) translateX(30px);   
54. }   
55. .heart3d [class$="9"] {   
56.   -webkit-transform : rotateY(90deg) rotateZ(45deg) translateX(30px);   
57.   transformer : rotateY(90deg) rotateZ(45deg) translateX(30px);   
58. }   
59. .heart3d [class$="10"] {   
60.   -webkit-transform : rotateY(100deg) rotateZ(45deg) translateX(30px);   
61.   transformer : rotateY(100deg) rotateZ(45deg) translateX(30px);   
62. }   
63. .heart3d [class$="11"] {   
64.   -webkit-transform : rotateY(110deg) rotateZ(45deg) translateX(30px);   
65.   transformer : rotateY(110deg) rotateZ(45deg) translateX(30px);   
66. }   
67. .heart3d [class$="12"] {   
68.   -webkit-transform : rotateY(120deg) rotateZ(45deg) translateX(30px);   
69.   transformer : rotateY(120deg) rotateZ(45deg) translateX(30px);   
70. }  
71. .heart3d [class$="13"] {   
72.   -webkit-transform : rotateY(130deg) rotateZ(45deg) translateX(30px);   
73.   transformer : rotateY(130deg) rotateZ(45deg) translateX(30px);   
74. }   
75. .heart3d [class$="14"] {   
76.   -webkit-transform : rotateY(140deg) rotateZ(45deg) translateX(30px);   
77.   transformer : rotateY(140deg) rotateZ(45deg) translateX(30px);   
78. }   
79. .heart3d [class$="15"] {   
80.   -webkit-transform : rotateY(150deg) rotateZ(45deg) translateX(30px);   
81.   transformer : rotateY(150deg) rotateZ(45deg) translateX(30px);   
82. }   
83. .heart3d [class$="16"] {   
84.   -webkit-transform : rotateY(160deg) rotateZ(45deg) translateX(30px);   
85.   transformer : rotateY(160deg) rotateZ(45deg) translateX(30px);   
86. }   
87. .heart3d [class$="17"] {   
88.   -webkit-transform : rotateY(170deg) rotateZ(45deg) translateX(30px);   
89.   transformer : rotateY(170deg) rotateZ(45deg) translateX(30px);   
90. }   
91. .heart3d [class$="18"] {   
92.   -webkit-transform : rotateY(180deg) rotateZ(45deg) translateX(30px);   
93.   transformer : rotateY(180deg) rotateZ(45deg) translateX(30px);   
94. }   
95. .heart3d [class$="19"] {   
96.   -webkit-transform : rotateY(190deg) rotateZ(45deg) translateX(30px);   
97.   transformer : rotateY(190deg) rotateZ(45deg) translateX(30px);   
98. }   
99. .heart3d [class$="20"] {   
100.   -webkit-transform : rotateY(200deg) rotateZ(45deg) translateX(30px);   
101.   transformer : rotateY(200deg) rotateZ(45deg) translateX(30px);   
102. }   
103. .heart3d [class$="21"] {   
104.   -webkit-transform : rotateY(210deg) rotateZ(45deg) translateX(30px);   
105.   transformer : rotateY(210deg) rotateZ(45deg) translateX(30px);   
106. }  
107. .heart3d [class$="22"] {   
108.   -webkit-transform : rotateY(220deg) rotateZ(45deg) translateX(30px);   
109.   transformer : rotateY(220deg) rotateZ(45deg) translateX(30px);   
110. }   
111. .heart3d [class$="23"] {   
112.   -webkit-transform : rotateY(230deg) rotateZ(45deg) translateX(30px);   
113.   transformer : rotateY(230deg) rotateZ(45deg) translateX(30px);   
114. }   
115. .heart3d [class$="24"] {   
116.   -webkit-transform : rotateY(240deg) rotateZ(45deg) translateX(30px);   
117.   transformer : rotateY(240deg) rotateZ(45deg) translateX(30px);   
118. }   
119. .heart3d [class$="25"] {   
120.   -webkit-transform : rotateY(250deg) rotateZ(45deg) translateX(30px);   
121.   transformer : rotateY(250deg) rotateZ(45deg) translateX(30px);   
122. }   
123. .heart3d [class$="26"] {   
124.   -webkit-transform : rotateY(260deg) rotateZ(45deg) translateX(30px);   
125.   transformer : rotateY(260deg) rotateZ(45deg) translateX(30px);   
126. }   
127. .heart3d [class$="27"] {   
128.   -webkit-transform : rotateY(270deg) rotateZ(45deg) translateX(30px);   
129.   transformer : rotateY(270deg) rotateZ(45deg) translateX(30px);   
130. }   
131. .heart3d [class$="28"] {   
132.   -webkit-transform : rotateY(280deg) rotateZ(45deg) translateX(30px);   
133.   transformer : rotateY(280deg) rotateZ(45deg) translateX(30px);   
134. }   
135. .heart3d [class$="29"] {   
136.   -webkit-transform : rotateY(290deg) rotateZ(45deg) translateX(30px);   
137.   transformer : rotateY(290deg) rotateZ(45deg) translateX(30px);   
138. }   
139. .heart3d [class$="30"] {   
140.   -webkit-transform : rotateY(300deg) rotateZ(45deg) translateX(30px);   
141.   transformer : 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愛心動畫效果，浪漫的小伙子可以試著學習一下哦，又get一個交友技能，謝謝閱讀，希望能幫到大家，請繼續關注腳本之家，我們會努力分享更多優秀的文章。