国內一级黄色视频|少妇91导航日韩第一页久久|黄色三A视频色爽网站|亚洲精品 无码一区二区在直播间|成人高清国产无码|aaa成人免费视频|国产一级一片免费播放放a|我要看免费的毛片|动漫a片免费观看|日韩欧美国产视频

學(xué)習(xí)自?[CSS] 打勾動畫 —— CodingStartup起碼課

效果圖

實現(xiàn)思路?

使用?svg?繪制圓圈和打鉤圖形，然后使用?stroke-array?和?stroke-offset?完成路徑動畫。

1. svg 繪制圖形

2. 設(shè)定?stroke-array?和?stroke-offset?值

3. 添加路徑動畫

繪制圖形

設(shè)定?stroke?屬性?

通過?stroke?屬性來模擬路徑動畫的原理，在?CSS動畫學(xué)習(xí)03：衛(wèi)星環(huán)繞loading?已經(jīng)介紹過了，此處不再贅述。

我們先為兩個圖形添加類名，然后使用 css 為圓環(huán)添加?stroke-array，值等于圓環(huán)的周長。

然后我們隨便給它一個?stroke-offset?屬性觀察一下效果：

可以看到，設(shè)置了?stroke-offset?的圓環(huán)缺口始于它的?三點鐘方向，并沿著?逆時針?方向擴(kuò)展。

我們想要路徑動畫，從圓環(huán)的頂部開始。因此我們需要將圓環(huán)逆時針旋轉(zhuǎn) 90°。

TIPS:?svg 中 transform 的寫法與 css 中還是有區(qū)別的，詳見?Rotate。當(dāng)然這里也可以使用 css 的?transform-origin?來完成。

?

旋轉(zhuǎn)后的效果如下：

類似的邏輯，我們?yōu)榇蜚^圖案添加?stroke?屬性，并將它們的?stroke-offset?都設(shè)置為圖案總長度（即剛好藏起整個圖形）。

添加路徑動畫?

接下來分別定義圓環(huán)和打鉤的動畫，將?stroke-offset?從總長度變化到 0。

添加一個 checkbox 用來觸發(fā)動畫：

大功告成。