189 8069 5689
本文小编为大家详细介绍“HTML5怎么制作3D爱心动画效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“HTML5怎么制作3D爱心动画效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
创新互联建站是少有的成都做网站、网站制作、营销型企业网站、微信小程序、手机APP,开发、制作、设计、友情链接、推广优化一站式服务网络公司,从2013年创立,坚持透明化,价格低,无套路经营理念。让网页惊喜每一位访客多年来深受用户好评
实现代码如下：
html代码：
XML / HTML代码将内容复制到文本
< div class ='heart3d' >
< div class ='rib1' >
< div class ='rib2' >
< div class ='rib3' >
< div class ='rib4' >
< div class ='rib5' >
< div class ='rib6' >
< div class ='rib7' >
< div class ='rib8' >
< div class ='rib9' >
< div class ='rib10' >
< div class ='rib11' >
< div class ='rib12' >
< div class ='rib13' >
< div class ='rib14' >
< div class ='rib15' >
< div class ='rib16' >
< div class ='rib17' >
< div class ='rib18' >
< div class ='rib19' >
< div class ='rib20' >
< div class ='rib21' >
< div class ='rib22' >
< div class ='rib23' >
< div class ='rib24' >
< div class ='rib25' >
< div class ='rib26' >
< div class ='rib27' >
< div class ='rib28' >
< div class ='rib29' >
< div class ='rib30' >
< div class ='rib31' >
< div class ='rib32' >
< div class ='rib33' >
< div class ='rib34' >
< div class ='rib35' >
< div class ='rib36' >
这么多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）;
}
}
读到这里，这篇“HTML5怎么制作3D爱心动画效果”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。