css實現(xiàn)彈簧效果(延時 轉(zhuǎn)換 立體 )，你學會了嗎
課代表來交作業(yè)了
- 代碼展示：
<!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>
