CSS打勾動畫圖是一種非常流行的前端開發技術，可以在網頁中增加一些視覺效果，讓用戶體驗更好。下面是一個簡單的例子，展示如何使用CSS實現打勾動畫圖。

/* CSS代碼 */
.checkmark {
position: relative;
display: block;
height: 25px;
width: 25px;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #2ecc71;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #2ecc71;
fill: none;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards,
fill .3s ease-in-out 0.8s forwards;
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #2ecc71;
}
}

上述CSS代碼實現了一個基本的打勾動畫圖，包括一個圓圈和一個勾。其中，.checkmark類用于定義整個圖形的大小和位置，.checkmark__circle類和.checkmark__check類則用于定義圓圈和勾的繪制。

值得注意的是，上述代碼中使用了動畫效果，可以通過改變stroke-dashoffset屬性的值來實現繪制路徑的動畫效果。另外，勾的填充效果通過動畫繪制的方式實現，需要定義一個box-shadow屬性。

綜上所述，CSS打勾動畫圖是一種簡單而實用的前端開發技術，可以應用于網頁設計中，增強用戶體驗。以上代碼只是一個基礎示例，開發者可以根據實際需要對其進行修改和優化，實現更加復雜和多樣化的效果。