CSS3-技能冷卻樣式

時間 2019-11-07

標籤 css3 css 技能冷卻樣式欄目 CSS 简体版

原文原文鏈接

最近學到了一個css的小動畫，在這裏分享給你們。css

時下最火的網絡遊戲當屬英雄聯盟了，此次分享的就是遊戲中技能CD倒計時的動畫。效果以下圖所示html

動畫原理分析

看起來只有兩種顏色，但HTML中可不止兩個部分。下面是該動畫的結構圖。css3

看懂了這個結構圖，大體的動畫流程也就清晰了。git

1.技能進入CD中，圖標變爲深色，此時兩個蒙版浮在最上層。以下圖所示。

2.倒計時開始，旋轉體順時針旋轉，開始慢慢覆蓋蒙版2。以下圖所示。

此時蒙版1處於最上層，蒙版2處於旋轉體下層。三者都位於底部上方。

3.當倒計時旋轉到一半時，也就有半邊顏色變爲淺色。以下圖所示

此時，旋轉體繼續旋轉，會出現什麼狀況呢？左半邊依舊是深色，被旋轉體覆蓋的蒙版2也會慢慢露出來。顯然，這個時候須要進行一些操做。 爲了讓右半邊依舊爲淺色，咱們讓蒙版2消失。爲了旋轉體可以覆蓋蒙版1，咱們改變蒙版1的層級，讓它位於旋轉體下方。

4.倒計時完成後，咱們可以看見圖標全是淺色。以下圖所示

至此，一次完整的技能CD動畫就完成了^_^~!讓咱們來看看CSS該怎麼寫把。

CSS3實現

爲了完成這個結構，咱們須要四個部分。因此在HTML中這樣定義github

<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右半圓形，固定在右邊，動畫後半段隱藏。bash

旋轉動畫以下：網絡

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

動畫前半段層級最高，後半段降低：ide

@keyframes second-half-show {
    0% { z-index: 3; }/*數值根據狀況而定便可*/
    50%,
    100% { z-index: 0; }
}
複製代碼

動畫全半段顯示，後半段隱藏：svg

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

inner樣式：wordpress

.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>
複製代碼