打勾 css 動畫是一種常用的動畫效果,可以在網(wǎng)頁中增加交互體驗。這種動畫效果通常用于表格、表單、勾選框等需要用戶進(jìn)行確認(rèn)的操作。
.checked { width: 1.5em; height: 1.5em; border: 2px solid gray; border-radius: 50%; position: relative; cursor: pointer; transition: all 0.3s ease; } .checked::before, .checked::after { content: ""; position: absolute; background-color: #4CAF50; transition: all 0.3s ease; } .checked::before { top: 50%; left: 0; width: 0.4em; height: 0.8em; transform: rotate(-45deg); transform-origin: top left; } .checked::after { top: 0; left: 50%; width: 0.8em; height: 0.4em; transform: rotate(-45deg); transform-origin: top right; } .checked:checked::before { height: 1.2em; top: 0; } .checked:checked::after { width: 1.2em; left: 0; }
以上是打勾 css 動畫的代碼實現(xiàn)。通過設(shè)置偽元素 before 和 after,使用 transform 實現(xiàn)旋轉(zhuǎn)變形。通過設(shè)置 transition 控制動畫效果。同時,利用 :checked 選擇器和 checked 屬性實現(xiàn)點擊勾選和取消勾選的效果。
在實際應(yīng)用中,我們可以將該動畫效果應(yīng)用到表單中的單選框或復(fù)選框中,以增強(qiáng)用戶交互體驗。