HTML5制作3D爱心动画教程 献给女友浪漫的礼物
谁说程序员不懂得浪漫，看看程序员是怎么浪漫的，今天小编在国外的网站上看到一个利用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代码：
CSS Code 复制内容到剪贴板 .heart3d { position : absolute ; top : 0; right right : 0; bottom bottom : 0; left : 0; margin : auto ; width : 100px ; height : 160px ; -webkit-transform-style: 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 #f22613 ; border-width : 1px 1px 0 0; border -radius: 50% 50% 0 / 40% 50% 0; } .heart3d [class$= "1" ] { -webkit-transform: rotateY(10deg) rotateZ(45deg) translateX( 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(360deg) rotateZ(45deg) translateX( 30px ); transform: rotateY(360deg) rotateZ(45deg) translateX( 30px ); }对这些线条进行渲染，以便其有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一个交友技能，谢谢阅读，希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章。
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
