CSS3-技能冷却样式

最近学到了一个css的小动画，在这里分享给大家。

时下最火的网络游戏当属英雄联盟了，这次分享的就是游戏中技能CD倒计时的动画。效果如下图所示

动画原理分析

看起来只有两种颜色，但HTML中可不止两个部分。下面是该动画的结构图。

看懂了这个结构图，大致的动画流程也就清晰了。

1.技能进入CD中，图标变为深色，此时两个蒙版浮在最上层。如下图所示。

2.倒计时开始，旋转体顺时针旋转，开始慢慢覆盖蒙版2。如下图所示。

此时蒙版1处于最上层，蒙版2处于旋转体下层。三者都位于底部上方。

3.当倒计时旋转到一半时，也就有半边颜色变为浅色。如下图所示

此时，旋转体继续旋转，会出现什么情况呢？左半边依旧是深色，被旋转体覆盖的蒙版2也会慢慢露出来。显然，这个时候需要进行一些操作。 为了让右半边依旧为浅色，我们让蒙版2消失。为了旋转体能够覆盖蒙版1，我们改变蒙版1的层级，让它位于旋转体下方。

4.倒计时完成后，我们能够看见图标全是浅色。如下图所示

至此，一次完整的技能CD动画就完成了^_^~!让我们来看看CSS该怎么写把。

CSS3实现

为了完成这个结构，我们需要四个部分。所以在HTML中这样定义

<div class="inner"><!--底部-->
    <div id="cdTime"></div>
    <div class="spiner"></div><!--旋转体-->
    <div class="masker"></div><!--蒙版1-->
    <div class="filler"></div><!--蒙版2-->
</div>

1.inner主要为背景颜色（技能图标），和技能框样式（可以方形，也可以圆形）。
2.spiner用来实现浅色部分旋转（换句话说：减少深色部分）。
3.masker左半圆形，固定在左边，动画后半段层级下降。
4.filler右半圆形，固定在右边，动画后半段隐藏。

旋转动画如下：

 @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

动画前半段层级最高，后半段下降：

@keyframes second-half-show {
    0% { z-index: 3; }/*数值根据情况而定即可*/
    50%,
    100% { z-index: 0; }
}

动画全半段显示，后半段隐藏：

@keyframes second-half-hide {
    0% { opacity: 1; }
    50%,
    100% { opacity: 0; }
}

inner样式：

.inner {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 200px auto 0 auto;
    background-color: rgb(201, 202, 202);
    border:solid 1px;
    overflow: hidden;
    border-radius: 5px;
}

spiner样式：

.spiner { 
    position: absolute;
    z-index: 1;
    top: -50px;
    left: -50px;
    width: 100px;
    height: 200px;
    transform-origin: right ;
    animation: spin 10s infinite linear;
    border-radius:  100px 0 0 100px;
    background-color: rgb(201, 202, 202);
}

masker样式：

.masker {
    position: absolute;
    left: -50px;
    top: -50px;
    width: 100px;
    height: 200px;
    border-radius: 100px 0px 0 100px;
    background-color: rgb(121, 121, 121);
    animation: second-half-show 10s  steps(1, end) infinite;
}

filler的样式与masker之对称即可

因为动画中的两个蒙版的变化都是瞬间完成的，不可以有渐变过程。所以animation中设置steps(1,end)表示1帧完成。不懂steps的话可以参考animation中的steps()逐帧动画

(数字的样式很简单，我就省略了）
JS显示数字时间：

<script>
    let CD = 10;
    var cdTime = document.getElementById('cdTime');
    cdTime.innerHTML = CD--;
    setInterval(function () {
        if (1 == CD) {
            cdTime.innerHTML = CD;
            let cdFloat = CD - 0.1;
            const timeFloat = setInterval(function () {
                cdTime.innerHTML = cdFloat.toFixed(1);
                cdFloat -= 0.1;
                if (cdFloat <= 0) {
                    clearInterval(timeFloat);
                    CD = 10;
                }
            }, 90)
        } else {
            cdTime.innerHTML = CD--;
        }
    }, 1000)
</script>

最后的1秒中，为了防止两个setInterval冲突，我将时间调整为90ms一跳，错开了0.1s

嗯，就分享到这里吧~~~~
项目地址：CSS3-技能冷却样式
参考于张鑫旭：CSS3实现鸡蛋饼饼状图loading等待转转转