HTML5-Tutorial zum Erstellen einer 3D-Liebesanimation, ein romantisches Geschenk für Ihre Freundin_HTML5-Tutorial-Fähigkeiten

Wer sagt, dass Programmierer nicht wissen, wie man romantisch ist? Heute habe ich auf einer ausländischen Website eine 3D-Liebesanimation gesehen, die ich meiner Liebsten zum Valentinstag schenken würde . , immer noch sehr gut. Natürlich. Wir können einige romantische Elemente im Hintergrund verwenden. Fügen Sie zum Beispiel schöne Fotos Ihrer Freundin hinzu. Dies ist ein preiswertes und dennoch bedeutungsvolles Geschenk zum Valentinstag. Sie können auf die DEMO klicken, um einen Blick darauf zu werfen. Zuerst die Renderings:

Der Implementierungscode lautet wie folgt:

　HTML-Code:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

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: absolut;   
3.   oben: 0;   
4.   richtigrichtig: 0;   
5.   untenunten: 0;   
6.   links: 0;   
7.   Marge: automatisch;   
8.   Breite: 100px;   
9.   Höhe: 160px;   
10.   -webkit-transform-style: preserve-3d;   
11.   transform-style: preserve-3d;   
12.   -webkit-animation: 15s unendlich linear drehen;   
13.   Animation: 15 s unendlich linear drehen;   
14. }   
15. .heart3d [class^="rib"] {   
16.   Position: absolut;   
17.   Breite: 100px;   
18.   Höhe: 160px;   
19.   Rand: fest #f22613;   
20.   Rahmenbreite: 1px 1px 0 0 ;   
21.   Grenze-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.   transformer : rotateY(310deg) rotateZ(45deg) translateX(30px);   
146. }   
147. .heart3d [class$="32"] {   
148.   -webkit-transform : rotateY(320deg) rotateZ(45deg) translateX(30px);   
149.   transformer : rotateY(320deg) rotateZ(45deg) translateX(30px);   
150. }   
151. .heart3d [class$="33"] {   
152.   -webkit-transform : rotateY(330deg) rotateZ(45deg) translateX(30px);   
153.   transformer : rotateY(330deg) rotateZ(45deg) translateX(30px);   
154. }   
155. .heart3d [class$="34"] {   
156.   -webkit-transform : rotateY(340deg) rotateZ(45deg) translateX(30px);   
157.   transformer : rotateY(340deg) rotateZ(45deg) translateX(30px);   
158. }   
159. .heart3d [class$="35"] {   
160.   -webkit-transform : rotateY(350deg) rotateZ(45deg) translateX(30px);   
161.   transformer : rotateY(350deg) rotateZ(45deg) translateX(30px);   
162. }   
163. .heart3d [class$="36"] {   
164.   -webkit-transform : rotateY(360deg) rotateZ(45deg) translateX(30px);   
165.   transformer : rotateY(360deg) rotateZ(45deg) translateX(30px);   
166. }  

　　对这些线条进行渲染，以便其有3D的视觉效果。

　　然后定义了一组名称为spin的HTML5动画：

Code CSS复制内容到剪贴板

1. @-webkit-keyframes spin {   
2.   à {   
3.     -webkit-transform : rotateY(360deg) rotateX(360deg);   
4.     transformation : rotateY(360deg) rotateX(360deg);   
5.   }   
6. }   
7.   
8. @keyframes spin {   
9.   à {   
10.     -webkit-transform : rotateY(360deg) rotateX(360deg);   
11.     transformation : rotateY(360deg) rotateX(360deg);   
12.   }   
13. }  

Ce qui précède est l'effet d'animation d'amour 3D obtenu par le code HTML et le code CSS. Les jeunes hommes romantiques peuvent essayer de l'apprendre et acquérir une autre compétence d'amitié. Merci d'avoir lu, j'espère que cela pourra aider tout le monde. à Script House. Nous essaierons de partager d’autres excellents articles.