<html>
<head>
<title>爱心图片
</title>
<style type="text/css">
*{margin:0px;padding:0px;}
body{background-color:black;}
.heart3d
{
width:100px;height:160px;
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto;
transform-style:preserve-3d;
animation:play 15s infinite linear;
}
.heart3d [class^="heartd"]
{
margin:0px;
padding:0px;
width:100px;
height:160px;
border:solid #ff33ff;
border-width:1px 1px 0px 0px;
border-radius:50% 50% 0% / 40% 50% 0%;
position:absolute;
}
.heart3d [class$="d1"]
{
transform:rotateY(10deg) rotateZ(45deg)
translateX(30px);
}
.heart3d [class$="d2"]
{
transform:rotateY(20deg) rotateZ(45deg)
translateX(30px);
}
.heart3d [class$="d3"]
{
transform:rotateY(30deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d4"]
{
transform:rotateY(40deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d5"]
{
transform:rotateY(50deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d6"]
{
transform:rotateY(60deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d7"]
{
transform:rotateY(70deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d8"]
{
transform:rotateY(80deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d9"]
{
transform:rotateY(90deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d10"]
{
transform:rotateY(100deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d11"]
{
transform:rotateY(110deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d12"]
{
transform:rotateY(120deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d13"]
{
transform:rotateY(130deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d14"]
{
transform:rotateY(140deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d15"]
{
transform:rotateY(150deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d16"]
{
transform:rotateY(160deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d17"]
{
transform:rotateY(170deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d18"]
{
transform:rotateY(180deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d19"]
{
transform:rotateY(190deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d20"]
{
transform:rotateY(200deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d21"]
{
transform:rotateY(210deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d22"]
{
transform:rotateY(220deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d23"]
{
transform:rotateY(230deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d24"]
{
transform:rotateY(240deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d25"]
{
transform:rotateY(250deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d26"]
{
transform:rotateY(260deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d27"]
{
transform:rotateY(270deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d28"]
{
transform:rotateY(280deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d29"]
{
transform:rotateY(290deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d30"]
{
transform:rotateY(300deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d31"]
{
transform:rotateY(310deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d32"]
{
transform:rotateY(320deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d33"]
{
transform:rotateY(330deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d34"]
{
transform:rotateY(340deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d35"]
{
transform:rotateY(350deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="d36"]
{
transform:rotateY(360deg) rotateZ(45deg) translateX(30px);
}
@keyframes play{
from{transform:rotateX(0deg) rotateY(0deg);}
to{transform:rotateX(360deg) rotateY(360deg);}
}
</style>
</head>
<body>
<div class="heart3d">
<div class="heartd1"></div>
<div class="heartd2"></div>
<div class="heartd3"></div>
<div class="heartd4"></div>
<div class="heartd5"></div>
<div class="heartd6"></div>
<div class="heartd7"></div>
<div class="heartd8"></div>
<div class="heartd9"></div>
<div class="heartd10"></div>
<div class="heartd11"></div>
<div class="heartd12"></div>
<div class="heartd13"></div>
<div class="heartd14"></div>
<div class="heartd15"></div>
<div class="heartd16"></div>
<div class="heartd17"></div>
<div class="heartd18"></div>
<div class="heartd19"></div>
<div class="heartd20"></div>
<div class="heartd21"></div>
<div class="heartd22"></div>
<div class="heartd23"></div>
<div class="heartd24"></div>
<div class="heartd25"></div>
<div class="heartd26"></div>
<div class="heartd27"></div>
<div class="heartd28"></div>
<div class="heartd29"></div>
<div class="heartd30"></div>
<div class="heartd31"></div>
<div class="heartd32"></div>
<div class="heartd33"></div>
<div class="heartd34"></div>
<div class="heartd35"></div>
<div class="heartd36"></div>
</div>
<script tpye="text/javascript">
var heart3d=document.getElementsByClassName('heart3d')[0];
var child=heart3d.children;
function randomcolor()
{
var r=Math.floor(Math.random()*255);
var g=Math.floor(Math.random()*255);
var b=Math.floor(Math.random()*255);
return "rgb("+r+","+g+","+b+")";
}
for(var k=0;k<child.length;k++)
{
//child[k].style.borderColor=randomcolor();
(function(k){
setInterval(function()
{child[k].style.borderColor=randomcolor(); },5)
})(k)
}
</script>
</body>
</html>