谁说程序员不懂得浪漫,看看程序员是怎么浪漫的,今天小编在国外的网站上看到一个利用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一个交友技能,谢谢阅读,希望能帮到大家,请继续关注跟版网模板,我们会努力分享更多优秀的文章。