在網頁制作中，經常需要使用到對勾圖標，它可以表現出一個選項已被選擇或操作已完成等意思。為了更好的實現這種效果，我們可以使用CSS純對勾來優化設計。

.checkmark{
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #999;
position: relative;
}
.checkmark::after{
content: "";
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%, -50%) rotate(45deg) scale(0);
width: 8px;
height: 15px;
border-bottom: 3px solid #fff;
border-right: 3px solid #fff;
}
.checkmark.checked{
border-color: #0f0;
}
.checkmark.checked::after{
transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

上述CSS代碼中，通過使用“::after”偽元素來實現對勾的形狀，具體實現過程為：

首先，我們創建了一個圓形的div元素，并設置了其邊框樣式和一些基本的屬性。然后，我們在元素的偽元素“::after”中使用位移和旋轉變換來實現一條斜線。

接著，利用scale()屬性實現對勾的動畫效果，當需要表現選項已被選擇或操作已完成的效果時，我們可以在元素上添加“checked”類名，并改變其邊框顏色，并同時實現對勾的出現動畫。

總的來說，使用CSS純對勾實現對勾圖標的效果，不僅設計簡單，代碼量少，而且能夠實現動態效果，相比于使用圖片的方式更加靈活、高效和美觀。