论坛 › 马黑黑教程专版 › 黑氏快充

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

黑氏快充

<style>
#papa { margin: 30px; min-height: 300px; }
#battery {
        width: 300px;
        height: 40px;
        border: 1px solid darkgreen;
        border-radius: 4px;
        filter: drop-shadow(2px 2px 6px black);
        position: relative;
}
#battery::before, #battery::after {
        position: absolute;
        content: '';
}
#battery::before {
        background: green;
        width: 0%;
        height: 100%;
        animation: var(--ani); /*charging 5s linear forwards;*/
}
#battery::after {
        background: darkgreen;
        width: 10px;
        height: 30px;
        top: 5px;
        right: -10px;
}
@keyframes charging {
        to { width: 100%; }
}
</style>

<div id="papa">
        <div id="battery"></div>
        <p><br><br><button id="mbtn" type="button" value="btn">马上充电</button></p>
</div>

<script>
mbtn.onclick = () => {
        battery.style.setProperty('--ani','');
        setTimeout( () => {
                battery.style.setProperty('--ani','charging 5s linear forwards');
        }, 10);
};
</script>

马黑黑 发表于 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预设的关键帧动画可以反复调用。

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

黑氏充电广告：

充电5秒钟，续航到月球。

红影 发表于 2023-4-4 09:55

这个好玩，眼睛看着充电就完成了{:4_173:}

红影 发表于 2023-4-4 09:57

马黑黑 发表于 2023-4-4 08:30
黑氏充电广告：

充电5秒钟，续航到月球。

厉害了，这电池这么大容量啊。

这个代码应该是，充电5秒钟，5秒反复充{:4_173:}

梦油 发表于 2023-4-4 11:29

嘿嘿！这挺有意思。

马黑黑 发表于 2023-4-4 12:07

梦油 发表于 2023-4-4 11:29
嘿嘿！这挺有意思。

嗯嗯，充电好快的

马黑黑 发表于 2023-4-4 12:07

红影 发表于 2023-4-4 09:55
这个好玩，眼睛看着充电就完成了

速度超快

马黑黑 发表于 2023-4-4 12:07

红影 发表于 2023-4-4 09:57
厉害了，这电池这么大容量啊。

这个代码应该是，充电5秒钟，5秒反复充

{:4_172:}

梦油 发表于 2023-4-4 14:48

马黑黑 发表于 2023-4-4 12:07
嗯嗯，充电好快的

看着都痛快

雨中悄然 发表于 2023-4-4 17:51

看着是1号电池，航天专用

马黑黑 发表于 2023-4-4 17:52

雨中悄然 发表于 2023-4-4 17:51
看着是1号电池，航天专用

这你也知道

雨中悄然 发表于 2023-4-4 17:53

马黑黑 发表于 2023-4-4 17:52
这你也知道

不能不知道啊。可以飞上去看长白山了

马黑黑 发表于 2023-4-4 17:54

雨中悄然 发表于 2023-4-4 17:53
不能不知道啊。可以飞上去看长白山了

我对长白山牌子的香烟感兴趣，对山本身没感觉

红影 发表于 2023-4-4 20:37

马黑黑 发表于 2023-4-4 12:07
速度超快

手机要能这样充电就好了{:4_173:}

红影 发表于 2023-4-4 20:37

马黑黑 发表于 2023-4-4 12:07


黑黑会玩，什么都玩得出来{:4_173:}

马黑黑 发表于 2023-4-4 20:42

红影 发表于 2023-4-4 20:37
黑黑会玩，什么都玩得出来

玩玩更快乐

马黑黑 发表于 2023-4-4 20:42

红影 发表于 2023-4-4 20:37
手机要能这样充电就好了

水吧手机都有这个功能，队长还木有签字，现在还木有批量生产{:4_170:}

红影 发表于 2023-4-4 21:53

马黑黑 发表于 2023-4-4 20:42
玩玩更快乐

你能玩出各种效果来，我不行啊，想玩玩都玩不出来{:4_173:}

查看完整版本: 黑氏快充