純css實(shí)現(xiàn)蘋果表盤動(dòng)畫_html/css

隨著蘋果表的大量生產(chǎn)，我想，用CSS來(lái)實(shí)現(xiàn)撥號(hào)動(dòng)畫的時(shí)候到了。

在這篇文章中，我們將使用keyframe動(dòng)畫和一點(diǎn)小技巧來(lái)實(shí)現(xiàn)蘋果標(biāo)表盤進(jìn)度條動(dòng)畫。

Demo

這是最終效果如下：

See the Pen Apple Watch Activity Dials CSS by Helkyle (@HelKyle) on CodePen.

撥號(hào)進(jìn)度條

表的動(dòng)畫是由3個(gè)線條構(gòu)成的，每個(gè)都是進(jìn)度條。進(jìn)度條兩邊帶有圓角。我們將使用一點(diǎn)小技巧來(lái)實(shí)現(xiàn)。

我們先來(lái)畫半個(gè)圓。HTML代碼如下：

我們使用border-radius屬性和keyframe來(lái)實(shí)現(xiàn)半月形狀和旋轉(zhuǎn)動(dòng)畫。
(圖片為gif)

.wedge { animation: rotate 4s infinite linear; border-radius: 0 4em 4em 0; background: red; width: 2em; height: 4em; transform-origin: 0% 50%; }@keyframes rotate { 100% { transform: rotateZ(360deg); }}

按照往常的做法，我可能會(huì)使用CSS3的clip屬性。但是由于瀏覽器內(nèi)核兼容性問(wèn)題，我決定還是放棄。這里，我們簡(jiǎn)單使用overflow:hidden就夠了。

這里使用了兩個(gè)元素，dial-container的寬度只有wedge的一半，而且它設(shè)置了overflow為hidden，容器的位置在半圓的右邊，并旋轉(zhuǎn)wedge，這樣就出現(xiàn)了扇形效果。

.dial-container { position: absolute; top: 0; left: 2em; width: 2em; height: 4em; overflow: hidden; }

為了畫完整個(gè)圓，我們需要?jiǎng)?chuàng)建第二個(gè)wedge和第二個(gè)container，放在左邊。

我使用了一個(gè)wrapper來(lái)給兩個(gè)containers定位。

并使用下面css來(lái)處理它們的位置關(guān)系。

.wrapper { position: absolute; width: 4em; height: 4em; left: calc(50% - 2em); }.dial-container { position: absolute; top: 0; bottom: 0; overflow: hidden; width: 2em; }.wedge { background: red; height: 4em; width: 2em; }.container1 { left: 2em; }.container1 .wedge { animation: rotate-bg-1 4s infinite linear; border-radius: 0 4em 4em 0; left: 0; transform-origin: 0 50%; }.container2 { left: 0; }.container2 .wedge { animation: rotate-bg-2 4s infinite linear; border-radius: 4em 0 0 4em; transform-origin: 2em 2em; }/* First animation moves 180 degrees in the first 2 seconds */@keyframes rotate-bg-1 { 50%, 100% { transform: rotateZ(180deg); }}/* Second animation moves 180 degrees in the last 2 seconds */@keyframes rotate-bg-2 { 0%, 50% { transform: rotateZ(0); } 100% { transform: rotateZ(180deg); }}

運(yùn)行結(jié)果：

進(jìn)度

下一步是讓wedge變成進(jìn)度條。我們可以使用偽類在中間畫個(gè)圓圈遮蓋掉。

.wrapper::after { content: ""; background: #fff; border-radius: 50%; width: 3em; height: 3em; position: absolute; top: 0.5em; left: 0.5em; } 

現(xiàn)在看起來(lái)有點(diǎn)進(jìn)度條的樣子了。

邊緣處理

蘋果表動(dòng)畫看起來(lái)很柔和還跟它的圓角有關(guān)。要?jiǎng)?chuàng)建這樣的圓角，在weget上用css屬性時(shí)不行的。不過(guò)我們可以使用點(diǎn)小技巧。

start元素和end元素是兩個(gè)多余的元素用來(lái)放在進(jìn)度條的開始和結(jié)尾（這樣就生成圓角了?。?/p>

.marker { background: green; border-radius: 50%; height: 0.5em; width: 0.5em; position: absolute; top: 0; left: calc(50% - 0.25em); }.end { animation: rotate-marker 4s infinite linear; transform-origin: 50% 2em; }@keyframes rotate-marker { 100% { transform: rotateZ(360deg); }}

上面的css把end圓設(shè)成綠色。并把transform-origin設(shè)置成容器中點(diǎn)。

整合到一起

三個(gè)這樣的進(jìn)度條整合到一起，就生成蘋果表的動(dòng)畫效果?？釂?

See the Pen Apple Watch Activity Dials CSS by Helkyle (@HelKyle) on CodePen.

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com