之前有看到过很多基于HTML5或者CSS3制作的爱心动画，不过基本上都是2D平面的，今天在国外的网站上看到一个基于HTML5 3D的爱心动画，对于HTML5爱好者来说，不免兴奋了一把。下面将分享一下这个3D爱心动画的实现过程，可以一起来看看。
当然你也可以先看一下DEMO演示
这么好看的HTML5爱心动画，我们当然要把源代码分享给大家，下面是小编整理的源代码，主要是HTML代码和CSS代码。
如果你对编程感兴趣或者想往编程方向发展，可以关注微信公众号【筑梦编程】，大家一起交流讨论！小编也会每天定时更新既有趣又有用的编程知识！
HTML代码：
这么多div，主要是构造爱心的线条区域。
下面是CSS3代码，对这些线条进行渲染，以便其有3D的视觉效果。
.heart3d{
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin: auto;
width:100px;
height:160px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: spin15sinfinite linear;
animation: spin15sinfinite linear;
}
.heart3d[class^="rib"]{
position: absolute;
width:100px;
height:160px;
border: solid#f22613;
border-width:1px1px00;
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);
}
然后定义了一组名称为spin的HTML5动画：
@-webkit-keyframesspin {
to{
-webkit-transform:rotateY(360deg)rotateX(360deg);
transform:rotateY(360deg)rotateX(360deg);
}
}
@keyframesspin {
to{
-webkit-transform:rotateY(360deg)rotateX(360deg);
transform:rotateY(360deg)rotateX(360deg);
}
}
好了，以上分享的HTML5 3D爱心动画还不错吧，里面还可以加照片的哟！！今天刚好送给妈妈作为小小的礼物吧。
网友评论