border-radius如何配合過渡動(dòng)畫使用

小樊
91
2024-06-17 17:11:56
欄目: 編程語言

要配合過渡動(dòng)畫使用border-radius,可以通過CSS中的transition屬性來實(shí)現(xiàn)。例如:

.element {
  border-radius: 50%;
  transition: border-radius 0.3s ease;
}

.element:hover {
  border-radius: 0%;
}

在上面的示例中,當(dāng)鼠標(biāo)懸停在元素上時(shí),border-radius的值會(huì)從50%過渡到0%,動(dòng)畫持續(xù)時(shí)間為0.3s,過渡效果為ease。這樣就可以實(shí)現(xiàn)border-radius的過渡動(dòng)畫效果。

0