在網頁制作中，經常需要在某些元素上添加一些特效來增加頁面的美觀性和用戶友好程度。其中，對勾特效是一種常見的元素效果，今天我們來介紹一種實現 div 右下角對勾特效的 CSS 效果。

首先，我們來看一下對勾圖形是如何繪制的，如下所示：

.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #7ac142;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
transform: rotate(45deg);
height: 0px;
overflow: hidden;
stroke-dasharray: 48;
stroke-dashoffset: 48;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #7ac142;
fill: none;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

上述代碼中，.checkmark__circle 元素是外邊圓的路徑元素，.checkmark 元素是對勾的路徑元素。下面是實現 div 右下角對勾特效的 CSS 代碼：

.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #7ac142;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
transform: rotate(45deg) scale(1);
opacity: 1;
animation: fade-in 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.45s forwards;  
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes fade-in {
0% {
transform: rotate(45deg) scale(0.7);
opacity: 0;
}
25% {
transform: rotate(45deg) scale(1.2);
opacity: 1;
}
50% {
transform: rotate(45deg) scale(0.8);
opacity: 1;
}
75% {
transform: rotate(45deg) scale(1);
opacity: 1;
}
100% {
transform: rotate(45deg) scale(1);
opacity: 1;
}
}

通過上述代碼，我們就實現了一個 div 右下角對勾特效的 CSS 效果。希望對你有所幫助！