KingのNote

交互动画

4/9/2024 样式效果

# 效果

0%

# 代码

animation-play-state: paused 表示当动画处于时间轴为0时的样式效果（状态）。当我们指定动画的延迟时间后，就可以修改 元素停止在动画指定时间状态。

# html

<div class="power">
    0%
</div>

<input id="range2" type="range" min="0" max="100" step="1" value="0"/>
1
2
3
4
5

# css

.power {
    --power: 0;
    margin: 30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    position: relative;
    overflow: hidden;
}

.power::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 40%;
    background: aqua;
    animation: rotate 4s linear infinite;
    z-index: -1;
}


@keyframes rotate {
    0% {
        transform: translateY(calc(100% - var(--power) * 1%)) rotate(0);
    }

    100% {
        transform: translateY(calc(100% - var(--power) * 1%)) rotate(360deg);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# js

const power = document.querySelector('.power')
const range2 = document.querySelector('#range2')
range2.addEventListener('input', (e) => {
    const val = e.target.value;
    power.innerHTML = val + '%'
    power.style.setProperty('--power', val)
})
1
2
3
4
5
6
7

描边动画