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

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

　　谁说程序员不懂得浪漫，看看程序员是怎么浪漫的，今天小编在国外的网站上看到一个利用HTML5和CSS3制作的3D爱心动画，在情人节时送给心爱的人，还是非常不错的。

当然了。

背景我们可以用一些浪漫元素。

如加上女朋友漂亮的照片。

这样可以制作一个廉价又很有意义的情人节礼物。

大家可以点解DEMO来看看。

先上效果图：

　　实现代码如下：

　　html代码：

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

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: 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. }   
7.   
8. @keyframes spin {   
9.   to {   
10.     -webkit-transform: rotateY(360deg) rotateX(360deg);   
11.     transform: rotateY(360deg) rotateX(360deg);   
12.   }   
13. }  

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