球形动画页面

最新推荐文章于 2020-04-01 11:41:19 发布

原创最新推荐文章于 2020-04-01 11:41:19 发布 · 420 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用HTML和CSS实现的球形动画案例。通过设置不同的旋转角度和位置，创建了一个三维立体效果的动画球体。该动画利用了关键帧动画实现连续旋转的效果，并通过不同层叠的div元素构造出球体的外观。

<html>
<head>
<title>球形动画页面</title>
</head>
<style type="text/css">
body{
background-color:#000;
}
.box{
width:300px;
height:300px;
position:absolute;
left:50%;
top:50%;
margin:-150px 0 0 -150px;
perspective-origin:50% 50%;
perspective:30000px;
}
@-webkit-keyframes rotate3d{
0%{transform:rotateZ(-30deg) rotateY(0);}
100%{transform:rotateZ(-30deg) rotateY(360deg);}
}
.ball{
height:100%;
transform-style:preserve-3d;
/*transform:rotateZ(0deg) rotateY(0deg);*/
-webkit-animation:rotate3d 30s infinite linear;
}
.ball:after{
content:'';
width:1px;
height:500px;
background-color:red;
display:block;
position:absolute;
left:0;
top:0;
transform:translateX(150px)translateY(-100px) ;
}
.ball > div{
border:1px #fff solid;
position:absolute;
width:100%;
height:100%;
border-radius:100%;
}
.ball .line-1{transform: rotateY(0);}
.ball .line-2{transform: rotateY(36deg);}
.ball .line-3{transform: rotateY(72deg);}
.ball .line-4{transform: rotateY(108deg);}
.ball .line-5{transform: rotateY(144deg);}
</style>
<body>
<div class="box">
<div class="ball">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
<div class="line-4"></div>
<div class="line-5"></div>
</div>
</div>
</body>
</html>