CSS3動畫效果能夠為我們的網頁增添更多的互動性和趣味性。本文將介紹如何使用CSS3制作出動畫效果的打鉤。

/* 定義基礎樣式 */
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10; 
/* 設置樣式為圓形 */
fill:none;
/* 設置顏色和大小 */
stroke: #00b4ff;
r: 18;
cx: 25;
cy: 25;
stroke-linecap: round;
}
.checkmark {
/* 設置透明度為0 */
opacity: 0;
transform: scale(0.7);
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
/* 設置顏色和大小 */
stroke: #00b4ff;
stroke-width: 2;
/* 設置樣式為對勾形狀 */
fill: none;
/* 將對勾納入動畫 */
animation: stroke .5s cubic-bezier(0.650, -0.600, 0.240, 1.650) forwards, 
scale .35s ease-in-out .5s forwards;
}
/* 定義動畫效果 */
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes scale {
50% {
opacity: 1;
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

使用以上代碼，可以實現一個簡單的動畫效果。首先定義了一個圓形，然后透明度設置為0，規定縮小為70%。接著定義對勾樣式，將其納入動畫使其呈現出打勾的效果。最后通過設置動畫的timing-function來制作出緩慢的動畫效果。