css3单独计算每个div的值，实现时空穿梭

主页 M

css3单独计算每个div的值，实现时空穿梭

2022-08-06 网页编程网 网页编程网

<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:black;
}
.box{
position:relative;
width:100px;
height:100px;
}
.nav{
width:100%;
height:100%;
outline:#096 solid 1px;
position:absolute;
filter:hue-rotate(calc(15deg * var(--i)));
transform-style:preserve-3d;
animation:move 25s linear infinite;
animation-delay:calc(1s * var(--i) - 25s);
}
@keyframes move{
from{
transform:perspective(1000px) translateZ(0) rotate(0);
}
to{
transform:perspective(1000px) translateZ(1000px) rotate(270deg);
}
}
</style>
<div class="box">
	<div class="nav" style="--i:1"></div>
	<div class="nav" style="--i:2"></div>
	<div class="nav" style="--i:3"></div>
	<div class="nav" style="--i:4"></div>
	<div class="nav" style="--i:5"></div>
	<div class="nav" style="--i:6"></div>
	<div class="nav" style="--i:7"></div>
	<div class="nav" style="--i:8"></div>
	<div class="nav" style="--i:9"></div>
	<div class="nav" style="--i:10"></div>
	<div class="nav" style="--i:11"></div>
	<div class="nav" style="--i:12"></div>
	<div class="nav" style="--i:13"></div>
	<div class="nav" style="--i:14"></div>
	<div class="nav" style="--i:15"></div>
	<div class="nav" style="--i:16"></div>
	<div class="nav" style="--i:17"></div>
	<div class="nav" style="--i:18"></div>
	<div class="nav" style="--i:19"></div>
	<div class="nav" style="--i:20"></div>
	<div class="nav" style="--i:21"></div>
	<div class="nav" style="--i:22"></div>
	<div class="nav" style="--i:23"></div>
	<div class="nav" style="--i:24"></div>
	<div class="nav" style="--i:25"></div>			
</div>

阅读原文

阅读 1810

123 显示电脑版