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”类名即可，这样就能实现一个方便易用的圆形打勾效果了。