黑氏快充

马黑黑 · 发表于 2023-4-4 08:22

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2023-4-4 08:23

源码

<style>
.mama {
width: 300px;
height: 40px;
border: 1px solid darkgreen;
border-radius: 4px;
filter: drop-shadow(2px 2px 6px black);
position: relative;
}
.mama::before, .mama::after {
position: absolute;
content: '';
}
.mama::before {
background: green;
width: 0%;
height: 100%;
animation: var(--ani); /*charging 5s linear forwards;*/
}
.mama::after {
background: darkgreen;
width: 10px;
height: 30px;
top: 5px;
right: -10px;
}
@keyframes charging {
to { width: 100%; }
}
</style>
<div class="mama"></div>
<p><button id="btn" type="button" value="btn">马上充电</button></p>
<script>
let mama = document.querySelector('.mama');
btn.onclick = () => {
mama.style.setProperty('--ani','');
setTimeout( () => {
mama.style.setProperty('--ani','charging 5s linear forwards');
}, 10);
};
</script>

复制代码

马黑黑 · 发表于 2023-4-4 08:30

本帖最后由马黑黑于 2023-4-4 12:09 编辑

简单解释：

单元素构建示意电池及充电过程：主元素边框1px，伪元素 ::after 做电池最右边的结构，伪元素 ::before 做充电进度显示。

伪元素的 animation 属性使用一个变量， var(--ani)，--ani 变量的值是一个关键帧动画描述语句，由JS提供。

JS部分，按钮单击事件代码中，先清除 mama 元素的CSS变量 --ani，然后通过定时器 setTimeout 间隔一点点的时间再给该变量赋值，这样CSS预设的关键帧动画可以反复调用。