HTML5 3D爱心动画js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5 3D爱心动画js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5 3D爱心动画</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
    <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>
</body>
</html>

CSS代码(style.css):

html,body{height:100%;}
body{background-color:black;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.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: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);}
@-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);}
}

附件:下载该文件资源,减少时间成本(增值服务)