css实现弹簧效果(延时 转换 立体 )，你学会了吗
课代表来交作业了
- 代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>魔力弹簧</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.item {
position: absolute;
background-color: transparent;
width: calc(var(--i)*25px);
aspect-ratio: 1;
border: 10px solid rgb(0, 200, 255);
border-radius: 50%;
transform: rotateX(70deg);
animation: move 3s ease-in-out calc(var(--i)*0.08s) infinite;
box-shadow: 0px 0px 15px rgb(124, 124, 124), inset 0px 0px 15px rgb(124, 124, 124);
}
/* 定制动画关键帧 */
@keyframes move {
0%,
100% {
transform: rotateX(70deg)translateY(0px);
filter: hue-rotate(0deg);
}
50% {
transform: rotateX(70deg)translateY(-35vw);
filter: hue-rotate(180deg);
}
}
/* 子元素垂直水平居中 */
.container {
width: 100vw;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item" style="--i:0;"></div>
<div class="item" style="--i:1;"></div>
<div class="item" style="--i:2;"></div>
<div class="item" style="--i:3;"></div>
<div class="item" style="--i:4;"></div>
<div class="item" style="--i:5;"></div>
<div class="item" style="--i:6;"></div>
<div class="item" style="--i:7;"></div>
<div class="item" style="--i:8;"></div>
<div class="item" style="--i:9;"></div>
<div class="item" style="--i:10;"></div>
</div>
</body>
<script>
</script>
- </html>
