CSS3實現打勾 效果

2021-10-04 18:48:29 字數 1396 閱讀 9035

樣式屬性

關於打勾✔效果，應該都不陌生。

eg：我們在某些商場，支付的時候，支付成功會有個成功的標識，就像下面這樣

我們看，這個效果的html結構

標籤作為畫布

標籤來畫✔外圍的圓

標籤來畫✔

屬性：
fill="none"設定背景顏色為無色

stroke="#68e534"設定圓的主題顏色 同✔

stroke-width="20"設定線條的粗細

stroke-linecap="round"設定線條兩端為圓角

stroke-linejoin="round"設定✔的交點為圓角

points="88,214 173,284 304,138"確定✔的位置

>


type


="checkbox"


>
主流的樣式設定，就不過的贅述啦

input[type="checkbox"]:checked~h2input[type="checkbox"]:checked+svg .circleinput[type="checkbox"]:checked+svg .tick實現聯動效果（類似於js）

@keyframes circle設定動態範圍

animation-fill-mode: forwards;必不可少的一項，因為我們在初始化的時候我們設定顯示範圍為不可見，這是屬性是用來設定顯示停留在最後時刻，這樣我們就能實現只有進場動畫，乙個從無到有的顯示效果

body


svgh2


input[type="checkbox"]:checked~h2


.circle


@keyframes circleto}


input[type="checkbox"]:checked+svg .circle


.tick


@keyframes tickto}


input[type="checkbox"]:checked+svg .tick


@keyframes title


to}
⬆

CSS3實現載入效果

預期實現的效果如下如所示 首先基本的html布局如下 對於的css 如下 首先設定一下基本的樣式 wrap wrap div 完成上面的css樣式定義後，頁面上就會有五個排列整齊的小細條了。然後我們來新增動畫效果 在 wrap div加入如下 webkit animation fadeout 1s ...

css3實現網格效果

利用background image裡的liner gradient屬性可以實現一些簡單的css網格背景，能自適應背景，挺實用的，下面就簡單的介紹兩款網格背景 1.桌布花紋 紅.png 塊height 300px width 300px background white background ima...

css3實現動畫效果

transition property 指定對 html 元素的哪個 css 屬性進行平滑漸變處理。該屬性 可以指定 background color width height 等各種標準的 css 屬性。all代表所有屬性 transition duration 指定屬性平滑漸變的持續時間。tra...