网页编程网

www.youkud.com

当前位置：主页 >> html5 >> 正文

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

阅读：2282 输入：2022-08-06 15:36:45

<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>

上一篇：css3实现不断旋转动画加载，并弹性布局显示
下一篇：js闭包，什么情况下用闭包

相关阅读: css3动画旋转综合应用; css3运用opacity实现旋转的菜单，背景图，类选择等; css3用伪元素实现加载引导动画

下载专区: 软件下载（提取码：mtag）

Tag

HTML工具: 进制间转换; 进制转换（带小数）; html代码运行

HTML工具: 字母翻转; 硬盘整数分区; html颜色代码

HTML工具: 除空格回车; 万年历; fojiao

HTML工具: 小游戏; 在线绘画; 更多

手机版
联系微信:jingqishens