HTML5制作3D爱心动画教程 献给女友浪漫的礼物_html5教程技巧-H5教程

　　实现代码如下：

　　html代码：

XML/HTML Code复制内容到剪贴板

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

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

　　CSS代码：

CSS Code复制内容到剪贴板

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复制内容到剪贴板

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

　　以上就是HTML代码和CSS代码实现的3D爱心动画效果，浪漫的小伙子可以试着学习一下哦，又get一个交友技能，谢谢阅读，希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章。