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

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

效果圖

實(shí)現(xiàn)思路?

使用?svg?繪制圓圈和打鉤圖形，然后使用?stroke-array?和?stroke-offset?完成路徑動(dòng)畫(huà)。

1. svg 繪制圖形

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

3. 添加路徑動(dòng)畫(huà)

繪制圖形

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

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

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

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

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

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

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

?

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

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

添加路徑動(dòng)畫(huà)?

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

添加一個(gè) checkbox 用來(lái)觸發(fā)動(dòng)畫(huà)：

大功告成。