CSS 是網頁樣式設計的重要工具，可以通過 CSS 來實現各種炫酷的效果。今天我們來學習一種非常簡單但實用的效果，就是一個圈打勾。

/* 先設置一個標準的圓形 */
.circle {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #aaa;
}
/* 接著加上勾 */
.circle:before {
content: '';
display: block;
width: 12px;
height: 20px;
border: 3px solid #fff;
border-top: none;
border-right: none;
transform: rotate(45deg);
position: relative;
left: 12px;
top: 7px;
}
/* 然后動畫效果 */
.circle.checked:before {
animation: check 0.5s forwards;
}
@keyframes check {
0% {
width: 0;
height: 0;
border: none;
transform: rotate(45deg);
}
50% {
width: 12px;
height: 20px;
border: 3px solid #fff;
border-top: none;
border-right: none;
transform: rotate(45deg);
}
100% {
width: 25px;
height: 25px;
border: 6px solid #fff;
border-top: none;
border-right: none;
transform: rotate(45deg);
}
}

上面的代碼實現了一個最基本的圓形，然后加上了一個斜向上的小方塊。最后加上了一個動畫效果，將小方塊變成了√，達到了圓形打勾的效果。

接下來，我們只需要在點擊時用 JavaScript 給元素加上“checked”類名即可，這樣就能實現一個方便易用的圓形打勾效果了。