在網(wǎng)頁設(shè)計中，動畫效果能夠提升用戶體驗，增強頁面的交互性。蓋章動畫是一種常見的效果，它可以模擬蓋章的整個過程，讓用戶感受到文檔被認(rèn)證的感覺。使用CSS可以簡單快捷地實現(xiàn)蓋章動畫效果。

/* 蓋章動畫樣式 */
.seal {
position: relative;
display: inline-block;
}
.seal::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
background-color: #f7bfcc;
border-radius: 100px;
box-sizing: border-box;
border: 6px solid #9f0a12;
transform: scale(0);
}
.seal.clicked::after {
animation: stamp 0.6s ease-in-out;
}
/* 蓋章動畫關(guān)鍵幀 */
@keyframes stamp {
0% {
transform: scale(0);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}

以上CSS樣式中，通過設(shè)置偽元素::after來模擬蓋章效果。當(dāng)用戶點擊蓋章按鈕時，應(yīng)該在蓋章元素上加上.clicked類名，觸發(fā)動畫效果。

動畫效果的具體實現(xiàn)在關(guān)鍵幀部分。在這里，我們定義了一個名為stamp的動畫，應(yīng)用于蓋章元素的::after偽元素上。這個動畫總時長為0.6秒，在動畫過程中，元素從初始狀態(tài)的scale(0)變換到最終狀態(tài)的scale(1)，并在中間的50%處進行一次放大操作，實現(xiàn)動畫效果的單向流程。

通過以上CSS樣式和關(guān)鍵幀的設(shè)置，我們就可以實現(xiàn)一款簡單的蓋章動畫，帶來更豐富的用戶體驗。