![图片[1]-翻滚的棍子-软猫库](https://rmk6.com/wp-content/uploads/2024/12/b5c28fcd3d20241226224155.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>翻滚的棍子</title>
<style>
*,
*::before,
*::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
body {
background-color: #111;
color: #fff;
min-height: 100vh;
display: grid;
place-items: center;
perspective: 40em;
overflow: hidden;
font-size: 2vh;
* {
transform-style: preserve-3d;
}
}
.scene {
position: relative;
-webkit-animation: scene 60s infinite linear;
animation: scene 60s infinite linear;
--duration: 4s;
}
@-webkit-keyframes scene {
to {
rotate: y -1turn;
}
}
@keyframes scene {
to {
rotate: y -1turn;
}
}
.mainStick {
--angle: asin(3/5);
position: absolute;
inset: -0px -10em;
background-color: #fff;
-webkit-animation: poleBase var(--duration) infinite ease-in;
animation: poleBase var(--duration) infinite ease-in;
.stick {
position: absolute;
inset: 0em;
background-color: #f00;
-webkit-animation: poleTranslate var(--duration) calc(
var(--duration) * -0
)
infinite cubic-bezier(0.4, 0, 0.6, 2.3);
animation: poleTranslate var(--duration) calc(var(--duration) * -0)
infinite cubic-bezier(0.4, 0, 0.6, 2.3);
i {
position: absolute;
inset: -0.4em -3em;
background-color: hsl(
0 0% calc((sin(var(--i) * 45deg) + 1) * 40% + 20%)
);
box-shadow: 0 0 0.5em #0005 inset;
transform: translateY(-2em) rotateX(calc(var(--i) * 45deg))
translateZ(0.95em);
}
}
}
@-webkit-keyframes poleBase {
0% {
transform-origin: right;
transform: translate(-2em, 0em) rotate(calc(var(--angle) * -1));
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
4% {
transform-origin: right;
transform: translate(-2em, 0em) rotate(calc(var(--angle) * -0.9));
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
10% {
transform-origin: right;
transform: translate(-2em, 0em) rotate(calc(var(--angle) * -1));
}
25% {
transform-origin: left;
transform: translate(2em, 12em) rotate(calc(var(--angle) * -1));
}
50% {
transform-origin: left;
transform: translate(2em, 12em) rotate(var(--angle));
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
54% {
transform-origin: left;
transform: translate(2em, 12em) rotate(calc(var(--angle) * 0.9));
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
transform-origin: left;
transform: translate(2em, 12em) rotate(var(--angle));
}
75% {
transform-origin: right;
transform: translate(-2em, 24em) rotate(var(--angle));
}
100% {
transform-origin: right;
transform: translate(-2em, 24em) rotate(calc(var(--angle) * -1));
}
0% {
translate: 0 0;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
100% {
translate: 0 -24em;
}
}
@keyframes poleBase {
0% {
transform-origin: right;
transform: translate(-2em, 0em) rotate(calc(var(--angle) * -1));
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
4% {
transform-origin: right;
transform: translate(-2em, 0em) rotate(calc(var(--angle) * -0.9));
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
10% {
transform-origin: right;
transform: translate(-2em, 0em) rotate(calc(var(--angle) * -1));
}
25% {
transform-origin: left;
transform: translate(2em, 12em) rotate(calc(var(--angle) * -1));
}
50% {
transform-origin: left;
transform: translate(2em, 12em) rotate(var(--angle));
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
54% {
transform-origin: left;
transform: translate(2em, 12em) rotate(calc(var(--angle) * 0.9));
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
transform-origin: left;
transform: translate(2em, 12em) rotate(var(--angle));
}
75% {
transform-origin: right;
transform: translate(-2em, 24em) rotate(var(--angle));
}
100% {
transform-origin: right;
transform: translate(-2em, 24em) rotate(calc(var(--angle) * -1));
}
0% {
translate: 0 0;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
100% {
translate: 0 -24em;
}
}
@-webkit-keyframes poleTranslate {
0%,
100% {
translate: 3em;
}
50% {
translate: -3em;
}
}
@keyframes poleTranslate {
0%,
100% {
translate: 3em;
}
50% {
translate: -3em;
}
}
.sticks {
.stick {
position: absolute;
-webkit-animation: stick calc(var(--duration) * 4) calc(
var(--duration) / -2 * var(--s)
)
infinite linear;
animation: stick calc(var(--duration) * 4) calc(
var(--duration) / -2 * var(--s)
)
infinite linear;
&:nth-child(even) {
--translateX: -8em;
}
i {
position: absolute;
inset: -0.4em -10em;
background-color: hsl(
calc(var(--s) * 45) 100% calc(
(sin(var(--i) * 45deg) + 1) * 25% + 25%
)
);
box-shadow: 0 0 0.5em #0005 inset;
transform: rotateY(90deg) rotateX(calc(var(--i) * 45deg)) translateZ(0.95em);
&:nth-child(2)::after,
&:nth-child(3)::after,
&:nth-child(4)::after {
content: '';
position: absolute;
inset: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-image: radial-gradient(
circle at var(--bgPosition, center),
var(--shadowColor, #000),
transparent 2em
);
-webkit-animation: shadow calc(var(--duration) * 4) calc(
var(--duration) / -2 * var(--s)
)
infinite;
animation: shadow calc(var(--duration) * 4) calc(
var(--duration) / -2 * var(--s)
)
infinite;
}
&:nth-child(2)::after {
--bgPosition: 50% -1.2em;
}
&:nth-child(3)::after {
--shadowColor: #0008;
}
&:nth-child(4)::after {
--bgPosition: 50% 2em;
}
}
}
}
@-webkit-keyframes stick {
0% {
transform: translate(var(--translateX, 8em), 48em);
}
37.5%,
38% {
transform: translate(var(--translateX, 8em), 12em);
}
39% {
transform: translate(var(--translateX, 8em), 10.56em);
}
100% {
transform: translate(var(--translateX, 8em), -48em);
}
}
@keyframes stick {
0% {
transform: translate(var(--translateX, 8em), 48em);
}
37.5%,
38% {
transform: translate(var(--translateX, 8em), 12em);
}
39% {
transform: translate(var(--translateX, 8em), 10.56em);
}
100% {
transform: translate(var(--translateX, 8em), -48em);
}
}
@-webkit-keyframes shadow {
0%,
36%,
60%,
100% {
opacity: 0;
}
40%,
55% {
opacity: 1;
}
}
@keyframes shadow {
0%,
36%,
60%,
100% {
opacity: 0;
}
40%,
55% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="scene">
<div class="back"></div>
<div class="mainStick">
<div class="stick">
<i style="--i: 0"></i><i style="--i: 1"></i><i style="--i: 2"></i
><i style="--i: 3"></i><i style="--i: 4"></i><i style="--i: 5"></i
><i style="--i: 6"></i><i style="--i: 7"></i>
</div>
</div>
<div class="sticks">
<div class="stick" style="--s: 0">
<i style="--i: 0"></i><i style="--i: 1"></i><i style="--i: 2"></i
><i style="--i: 3"></i><i style="--i: 4"></i><i style="--i: 5"></i
><i style="--i: 6"></i><i style="--i: 7"></i>
</div>
<div class="stick" style="--s: 1">
<i style="--i: 0"></i><i style="--i: 1"></i><i style="--i: 2"></i
><i style="--i: 3"></i><i style="--i: 4"></i><i style="--i: 5"></i
><i style="--i: 6"></i><i style="--i: 7"></i>
</div>
<div class="stick" style="--s: 2">
<i style="--i: 0"></i><i style="--i: 1"></i><i style="--i: 2"></i
><i style="--i: 3"></i><i style="--i: 4"></i><i style="--i: 5"></i
><i style="--i: 6"></i><i style="--i: 7"></i>
</div>
<div class="stick" style="--s: 3">
<i style="--i: 0"></i><i style="--i: 1"></i><i style="--i: 2"></i
><i style="--i: 3"></i><i style="--i: 4"></i><i style="--i: 5"></i
><i style="--i: 6"></i><i style="--i: 7"></i>
</div>
<div class="stick" style="--s: 4">
<i style="--i: 0"></i><i style="--i: 1"></i><i style="--i: 2"></i
><i style="--i: 3"></i><i style="--i: 4"></i><i style="--i: 5"></i
><i style="--i: 6"></i><i style="--i: 7"></i>
</div>
<div class="stick" style="--s: 5">
<i style="--i: 0"></i><i style="--i: 1"></i><i style="--i: 2"></i
><i style="--i: 3"></i><i style="--i: 4"></i><i style="--i: 5"></i
><i style="--i: 6"></i><i style="--i: 7"></i>
</div>
<div class="stick" style="--s: 6">
<i style="--i: 0"></i><i style="--i: 1"></i><i style="--i: 2"></i
><i style="--i: 3"></i><i style="--i: 4"></i><i style="--i: 5"></i
><i style="--i: 6"></i><i style="--i: 7"></i>
</div>
<div class="stick" style="--s: 7">
<i style="--i: 0"></i><i style="--i: 1"></i><i style="--i: 2"></i
><i style="--i: 3"></i><i style="--i: 4"></i><i style="--i: 5"></i
><i style="--i: 6"></i><i style="--i: 7"></i>
</div>
</div>
</div>
</body>
</html>
THE END
暂无评论内容