要實現邊框動畫,可以使用CSS的@keyframes規則和transition屬性來實現。以下是一個簡單的示例:
CSS代碼:
@keyframes borderAnimation {
0% {
border-width: 1px;
}
50% {
border-width: 5px;
}
100% {
border-width: 1px;
}
}
.border {
border: 1px solid black;
transition: border-width 0.5s;
}
.border:hover {
animation: borderAnimation 2s infinite;
}
在上面的示例中,我們定義了一個名為borderAnimation的關鍵幀動畫,使邊框的寬度在0%、50%和100%時發生變化。然后,我們將這個動畫應用到具有.border類的元素上,并使用transition屬性定義了邊框寬度的過渡效果。當用戶將鼠標懸停在具有.border類的元素上時,會觸發邊框動畫。
你可以根據自己的需求自定義邊框動畫的效果和樣式,例如邊框顏色、形狀等。希望這個示例能幫助到你實現邊框動畫效果。