炫酷隧道css,js
2018-08-13 本文已影响0人
焦迈奇
image.png
.container{
width: 100%;
height:100%;
perspective: 500px;
}
@keyframes round {
to{
transform:rotateX(360deg);
}
}
.box{
width:100%;
height:100%;
transform-style: preserve-3d;
transform: rotateY(0deg) translateZ(350px);
}
.tunnel{
position:relative;
width:200px;
height:200px;
margin:0 auto;
transform-style:preserve-3d;
animation:round 10s infinite linear;
}
.ring{
position:absolute;
width:100%;
height:100%;
border:6px;
border-radius:50%;
border-style:dashed;
list-style-type:none;
transform-style:preserve-3d;
color: #1418c1;
}
<body>
<div class="container">
<div class="box">
<ul class="tunnel">
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
<li class="ring"></li>
</ul>
</div>
</div>
<script>
var li=document.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
li[i].style.color="hsl("+i*5+",100%,50%)";
console.log(li[i].style.color);
li[i].style.transform="rotateX("+i*5+"deg) translateY(200px)";
console.log(li[i].style.transform);
}
console.log(li.length);
</script>
</body>
里面需要注意的点
- perspective放置于父元素，则所有的子元素都只有一个源，若设置多个perspective于父辈元素，则3d的绕轴位置会发生改变，避免这种情况则只设定一个视距。
- hsl（h,s,l）分别代表颜色，饱和度，亮度，注意饱和度和亮度的比例会影响颜色。
- 72个li标签每一个绕y轴rotate(i*5deg)构成整个的环状，颜色同理。
- border-style:dashed虚化。
- li标签的元素位置负责构成环状，而运动由父元素.tunnel rotate(360deg)所实现。
- 记得给有动画的元素添加transfor-style:preserved-3d.
