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

谁说程序员不懂得浪漫，看看程序员是怎么浪漫的，今天小编在国外的网站上看到一个 利用HTML5 和CSS3 制作的3D 爱心动画，在情人节时送给心爱的人，还是非常不错的。 当然了。背景我们可以用一些浪漫元素。如加上女朋友漂亮的照片。这样可以制作一个廉价 又很有意义的情人节礼物。大家可以点解DEMO 来看看。先上效果图： 实现代码如下： html 代码： XML/HTML Cod 复制内容到剪贴板 lt;div class=’heart3d ’gt; lt;div class=’rib1 ′gt;lt;/divgt; lt;div class=’rib2 ′gt;lt;/divgt; lt;div class=’rib3 ′gt;lt;/divgt; lt;div class=’rib4 ′gt;lt;/divgt; lt;div class=’rib5 ′gt;lt;/divgt; lt;div class=’rib6 ′gt;lt;/divgt; lt;div class=’rib7 ′gt;lt;/divgt; lt;div class=’rib8 ′gt;lt;/divgt; lt;div class=’rib9 ′gt;lt;/divgt; lt;div class=’rib10 ′gt;lt;/divgt; lt;div class=’rib11 ′gt;lt;/divgt; lt;div class=’rib12 ′gt;lt;/divgt; lt;div class=’rib13 ′gt;lt;/divgt; lt;div class=’rib14 ′gt;lt;/divgt; lt;div class=’rib15 ′gt;lt;/divgt; lt;div class=’rib16 ′gt;lt;/divgt; lt;div class=’rib17 ′gt;lt;/divgt; lt;div class=’rib18 ′gt;lt;/divgt; lt;div class=’rib19 ′gt;lt;/divgt; lt;div class=’rib20 ′gt;lt;/divgt; lt;div class=’rib21 ′gt;lt;/divgt; lt;div class=’rib22 ′gt;lt;/divgt; lt;div class=’rib23 ′gt;lt;/divgt; lt;div class=’rib24 ′gt;lt;/divgt; lt;div class=’rib25 ′gt;lt;/divgt; lt;div class=’rib26 ′gt;lt;/divgt; lt;div class=’rib27 ′gt;lt;/divgt; lt;div class=’rib28 ′gt;lt;/divgt; lt;div class=’rib29 ′gt;lt;/divgt; lt;div class=’rib30 ′gt;lt;/divgt; lt;div class=’rib31 ′gt;lt;/divgt; lt;div class=’rib32 ′gt;lt;/divgt; lt;div class=’rib33 ′gt;lt;/divgt; lt;div class=’rib34 ′gt;lt;/divgt; lt;div class=’rib35 ′gt;lt;/divgt; lt;div class=’rib36 ′gt;lt;/divgt; lt;/divgt; 这么多div，主要是构造爱心的线条区域。 CSS 代码 CSS Code 复制内容到剪贴板 .heart3d { position: absolute; top: 0; rightright: 0; bottombottom: 0; left: 0; margin: auto; width: 10olute; width: 100px; height: 160px; border: solid #f22613; border-width: 1px 1px 0 0; border-radius: 5