谁说程序员不懂得浪漫，看看程序员是怎么浪漫的，今天小编在 国外 的网站上看到一个 利用 HT ML 5和CSS3 制作 的3D爱心动画，在情人节时送给心爱的人，还是非常不错的。当然了。背景我们可以用一些浪漫元素。如加上女 朋友 漂亮的照片。这样可以制作一个廉价又很有意义的情人节礼物。大家可以点解DEMO来看看。先上效果图：@H_ 304 _1@
实现代码如下：
html代码：
XM L/HTML Code 复制内容到剪贴板
< div &nbs p; class =’heart3d’ > < div class =’rib1& PR ime; > </ 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代码：
CSS Code 复制内容到剪贴板
.heart3d { pos IT ion : absolute ; top : 0; right right : 0; bottom bottom : 0; left : 0; m arg in : auto ; width : 100px ; h ei ght : 160px ; - webkit -t ransform -s tyle: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin 15s infinite linear; animation: spin 15s infinite linear; } .heart3d [class^= "rib" ] { position : absolute ; width : 100px ; height : 160px ; border : solid # f2 2613 ; border-width : 1px 1px 0 0; border -radius: 50% 50% 0 / 40% 50% 0; } .heart3d [class$= "1" ] { -webkit-transform: rotateY(10 deg ) rotateZ(45deg) trans latex ( 30px ); transform: rotateY(10deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "2" ] { -webkit-transform: rotateY(20deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(20deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "3" ] { -webkit-transform: rotateY(30deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(30deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "4" ] { -webkit-transform: rotateY(40deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(40deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "5" ] { -webkit-transform: rotateY(50deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(50deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "6" ] { -webkit-transform: rotateY(60deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(60deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "7" ] { -webkit-transform: rotateY(70deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(70deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "8" ] { -webkit-transform: rotateY(80deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(80deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "9" ] { -webkit-transform: rotateY(90deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(90deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "10" ] { -webkit-transform: rotateY(100deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(100deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "11" ] { -webkit-transform: rotateY(110deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(110deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "12" ] { -webkit-transform: rotateY(120deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(120deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "13" ] { -webkit-transform: rotateY(130deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(130deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "14" ] { -webkit-transform: rotateY(140deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(140deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "15" ] { -webkit-transform: rotateY(150deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(150deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "16" ] { -webkit-transform: rotateY(160deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(160deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "17" ] { -webkit-transform: rotateY(170deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(170deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "18" ] { -webkit-transform: rotateY(180deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(180deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "19" ] { -webkit-transform: rotateY(190deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(190deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "20" ] { -webkit-transform: rotateY(200deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(200deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "21" ] { -webkit-transform: rotateY(210deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(210deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "22" ] { -webkit-transform: rotateY(220deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(220deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "23" ] { -webkit-transform: rotateY(230deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(230deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "24" ] { -webkit-transform: rotateY(240deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(240deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "25" ] { -webkit-transform: rotateY(250deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(250deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "26" ] { -webkit-transform: rotateY(260deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(260deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "27" ] { -webkit-transform: rotateY(270deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(270deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "28" ] { -webkit-transform: rotateY(280deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(280deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "29" ] { -webkit-transform: rotateY(290deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(290deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "30" ] { -webkit-transform: rotateY(300deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(300deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "31" ] { -webkit-transform: rotateY(310deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(310deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "32" ] { -webkit-transform: rotateY(320deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(320deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "33" ] { -webkit-transform: rotateY(330deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(330deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "34" ] { -webkit-transform: rotateY(340deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(340deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "35" ] { -webkit-transform: rotateY(350deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(350deg) rotateZ(45deg) translateX( 30px ); } .heart3d [class$= "36" ] { -webkit-transform: rotateY( 360 deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(360deg) rotateZ(45deg) translateX( 30px ); }
对这些线条进行渲染，以便其有3D的视觉效果。
然后定义了一组名称为spin的HTML5动画 ：
CSS Code 复制内容到剪贴板
@-webkit-keyfr am es 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一个交友技能，谢谢阅读，希望能帮到大家，请继续关注，我们会 努力 分享更多优秀的 文章 。
总结
以上是 为你收集整理的 HTML5制作3D爱心动画教程 献给女友浪漫的礼物 全部内容，希望文章能够帮你解决 HTML5制作3D爱心动画教程 献给女友浪漫的礼物 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于HTML5制作3D爱心动画教程 献给女友浪漫的礼物的详细内容...