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

　谁说程序员不懂得浪漫，看看程序员是怎么浪漫的，今天小编在国外的网站上看到一个利用HTML5和CSS3制作的3D爱心动画，在情人节时送给心爱的人，还是非常不错的。当然了。背景我们可以用一些浪漫元素。如加上女朋友漂亮的照片。这样可以制作一个廉价又很容易的情人节礼物。大家可以点解DEMO来看看。先上效果图：

　　实现代码如下：

　　html代码：

XML / HTML代码将内容复制到文本

< 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代码将内容复制到文本

.heart3d {

职位：绝对;

最高：0;

右右：0;

底部底部：0;

左：0;

保证金：自动;

宽度： 100px ;

高度： 160px ;

-webkit-transform-style：保留3d;

转换样式：reserve-3d;

-webkit-animation：旋转15s无限线性；

动画：旋转15秒无限线性；

}

.heart3d [class ^ = “ rib” ] {

职位：绝对;

宽度： 100px ;

高度： 160px ;

边框：实心＃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 ）;

转换：rotateY（10deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 2” ] {

-webkit-transform：rotateY（20deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（20deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 3” ] {

-webkit-transform：rotateY（30deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（30deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 4” ] {

-webkit-transform：rotateY（40deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（40deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 5” ] {

-webkit-transform：rotateY（50deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（50deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 6” ] {

-webkit-transform：rotateY（60deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（60deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 7” ] {

-webkit-transform：rotateY（70deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（70deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 8” ] {

-webkit-transform：rotateY（80deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（80deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 9” ] {

-webkit-transform：rotateY（90deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（90deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 10” ] {

-webkit-transform：rotateY（100deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（100deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 11” ] {

-webkit-transform：rotateY（110deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（110deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 12” ] {

-webkit-transform：rotateY（120deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（120deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 13” ] {

-webkit-transform：rotateY（130deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（130deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 14” ] {

-webkit-transform：rotateY（140deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（140deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 15” ] {

-webkit-transform：rotateY（150deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（150deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 16” ] {

-webkit-transform：rotateY（160deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（160deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 17” ] {

-webkit-transform：rotateY（170deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（170deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 18” ] {

-webkit-transform：rotateY（180deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（180deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 19” ] {

-webkit-transform：rotateY（190deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（190deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 20” ] {

-webkit-transform：rotateY（200deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（200deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 21” ] {

-webkit-transform：rotateY（210deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（210deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 22” ] {

-webkit-transform：rotateY（220deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（220deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 23” ] {

-webkit-transform：rotateY（230deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（230deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 24” ] {

-webkit-transform：rotateY（240deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（240deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 25” ] {

-webkit-transform：rotateY（250deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（250deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 26” ] {

-webkit-transform：rotateY（260deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（260deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 27” ] {

-webkit-transform：rotateY（270deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（270deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 28” ] {

-webkit-transform：rotateY（280deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（280deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 29” ] {

-webkit-transform：rotateY（290deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（290deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 30” ] {

-webkit-transform：rotateY（300deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（300deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 31” ] {

-webkit-transform：rotateY（310deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（310deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 32” ] {

-webkit-transform：rotateY（320deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（320deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 33” ] {

-webkit-transform：rotateY（330deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（330deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 34” ] {

-webkit-transform：rotateY（340deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（340deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 35” ] {

-webkit-transform：rotateY（350deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（350deg）rotateZ（45deg）translateX（30px ）;

}

.heart3d [class $ = “ 36” ] {

-webkit-transform：rotateY（360deg）rotateZ（45deg）translateX（30px ）;

转换：rotateY（360deg）rotateZ（45deg）translateX（30px ）;

}

　　对这些线条进行渲染，刹车其有3D的视觉效果。

　　然后定义了一组名称为spin的HTML5动画：

CSS代码将内容复制到文本

@ -webkit-keyframes旋转{

至 {

-webkit-transform：rotateY（360deg）rotateX（360deg）;

变换：rotateY（360deg），rotateX（360deg）;

}

@keyframes spin {

至 {

-webkit-transform：rotateY（360deg）rotateX（360deg）;

变换：rotateY（360deg），rotateX（360deg）;

}

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h61012.shtml