炫酷隧道css,js

作者: 焦迈奇 | 来源:发表于2018-08-13 21:17 被阅读0次

炫酷隧道css,js
21个CSS3 / JS实现的时钟
css炫酷特效
webpack的几个概念
animate.css
css原来也可以这么酷！css生成艺术【笔记】
前端用库
引用第三方样式库实现动画
炫酷转场动画-iOS
CSS之乱七八糟的笔记

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.