border-radius屬性可以用于創建圓角效果,也可以在CSS動畫中使用。通過在關鍵幀中改變border-radius的值,可以實現圓角動畫效果。
以下是一個示例,演示了如何在CSS動畫中使用border-radius屬性來創建一個圓角動畫效果:
@keyframes round {
0% {
border-radius: 0%;
}
50% {
border-radius: 50%;
}
100% {
border-radius: 100%;
}
}
#animated {
width: 100px;
height: 100px;
background-color: blue;
animation: round 2s infinite alternate;
}
在上面的示例中,我們定義了一個名為"round"的關鍵幀動畫,該動畫在0%、50%和100%的關鍵幀中分別設置了不同的border-radius值。然后,我們將這個動畫應用到一個具有藍色背景的元素上,并設置了2秒的循環時間。
通過這種方式,元素將會在動畫過程中從沒有圓角逐漸變成圓形,然后再恢復原狀,實現了圓角動畫效果。你也可以根據需要修改關鍵幀中的數值,來實現不同的圓角動畫效果。