欢迎光临
分享,是一种快乐!

CSS3立体线框球形动画(原创)

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>立体线框球形动画</title>
</head>
<style type="text/css">
 body{
 background-color: #000;
 }
 .ball-box{
 width: 300px;
 height: 300px;
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -150px 0 0 -150px;
 perspective-origin: 50% 50%;
 perspective: 3000px;
 }
 @-webkit-keyframes rotated3d {
 0%{transform: rotateZ(-30deg) rotateY(0deg);}
 100%{transform: rotateZ(-30deg) rotateY(360deg);}
 }
 .ball{
 height: 100%;
 transform-style: preserve-3d;
 -webkit-animation: rotated3d 30s infinite linear;
 /*transform: rotateZ(-30deg) rotateY(0deg);*/
 }
 .ball:after{
 content: '';
 width: 1px;
 height: 300px;
 background-color: #eeeeee;
 display: block;
 position: relative;
 left: 0;
 top: 0;
 transform: translateX(150px) translateY(0px);
 }
 .ball > div{
 /*border: 1px solid #ffffff;*/
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 100%;
 }
 .ball .line-1{border: 1px solid #ff0000;transform: rotateY(0);}
 .ball .line-2{border: 1px solid #aaaaaa;transform: rotateY(36deg);}
 .ball .line-3{border: 1px solid #fff000;transform: rotateY(72deg);}
 .ball .line-4{border: 1px solid #00ff00;transform: rotateY(108deg);}
 .ball .line-5{border: 1px solid #0000ff;transform: rotateY(144deg);}

 h2{
 text-align: center;
 margin-top: 75px;
 color: #33a3dc;
 }
</style>
<body>
<h2>Hello 看看下面的效果吧!</h2>
<div class="ball-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>
赞(0) 打赏
未经允许不得转载:小宅猿 » CSS3立体线框球形动画(原创)
分享到:

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏