谁说程序员不懂得浪漫,看看程序员是怎么浪漫的,今天小编在国外的网站上看到一个利用HTML5和CSS3制作的3D爱心动画,在情人节时送给心爱的人,还是非常不错的。当然了。背景我们可以用一些浪漫元素。如加上女朋友漂亮的照片。这样可以制作一个廉价又很有意义的情人节礼物。大家可以点解DEMO来看看。先上效果图:
实现代码如下:
html代码:
XML/HTML Code复制内容到剪贴板
- div class=’heart3d’>
-
div class=’rib1′>div>
-
div class=’rib2′>div>
-
div class=’rib3′>div>
-
div class=’rib4′>div>
-
div class=’rib5′>div>
-
div class=’rib6′>div>
-
div class=’rib7′>div>
-
div class=’rib8′>div>
-
div class=’rib9′>div>
-
div class=’rib10′>div>
-
div class=’rib11′>div>
-
div class=’rib12′>div>
-
div class=’rib13′>div>
-
div class=’rib14′>div>
-
div class=’rib15′>div>
-
div class=’rib16′>div>
-
div class=’rib17′>div>
-
div class=’rib18′>div>
-
div class=’rib19′>div>
-
div class=’rib20′>div>
-
div class=’rib21′>div>
-
div class=’rib22′>div>
-
div class=’rib23′>div>
-
div class=’rib24′>div>
-
div class=’rib25′>div>
-
div class=’rib26′>div>
-
div class=’rib27′>div>
-
div class=’rib28′>div>
-
div class=’rib29′>div>
-
div class=’rib30′>div>
-
div class=’rib31′>div>
-
div class=’rib32′>div>
-
div class=’rib33′>div>
-
div class=’rib34′>div>
-
div class=’rib35′>div>
-
div class=’rib36′>div>
-
div>
这么多div,主要是构造爱心的线条区域。
CSS代码:
对这些线条进行渲染,以便其有3D的视觉效果。
然后定义了一组名称为spin的HTML5动画:
CSS Code复制内容到剪贴板
- @-webkit-keyframes spin {
- to {
- -webkit-transform: rotateY(360deg) rotateX(360deg);
- transform: rotateY(360deg) rotateX(360deg);
- }
- }
-
- @keyframes spin {
- to {
- -webkit-transform: rotateY(360deg) rotateX(360deg);
- transform: rotateY(360deg) rotateX(360deg);
- }
- }
以上就是HTML代码和CSS代码实现的3D爱心动画效果,浪漫的小伙子可以试着学习一下哦,又get一个交友技能,谢谢阅读,希望能帮到大家,请继续关注脚本之家,我们会努力分享更多优秀的文章。