在前端開發(fā)中，我們經(jīng)常需要一些吸引人的動效來增加網(wǎng)頁的視覺效果。其中，CSS橢圓90度動畫就是一種非常流行的效果。本文將介紹如何使用CSS來實現(xiàn)這一效果。

.ellipse {
width: 100px;
height: 50px;
background-color: #3498db;
border-radius: 50% / 50%;
transform-origin: 0% 50%;
animation: ellipse 2s ease-in infinite;
}
@keyframes ellipse {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(90deg);
}
}

上述代碼中，我們首先設(shè)置了一個div元素的樣式，包括寬度、高度、背景色、圓角和變形中心。其中，border-radius: 50% / 50%的含義是將元素變成一個橢圓形。同時，transform-origin: 0% 50%表示將旋轉(zhuǎn)的中心點設(shè)置在元素左上角。

接下來，我們定義了一個名為“ellipse”的CSS動畫，并在div元素中引用。該動畫的關(guān)鍵幀包括初始狀態(tài)（rotate(0deg)）和終止狀態(tài)（rotate(90deg)），表示div元素從原始位置逆時針旋轉(zhuǎn)90度。

最后，我們設(shè)置了動畫執(zhí)行的總時間（2秒），過渡方式（ease-in）和循環(huán)次數(shù)（infinite），使元素能夠無限旋轉(zhuǎn)。

通過這些CSS代碼，我們就可以實現(xiàn)一個漂亮的橢圓90度動畫效果。如果需要自定義顏色、大小、過渡方式和循環(huán)次數(shù)等，只需修改代碼中的相應(yīng)參數(shù)即可。希望這篇文章能對你的前端開發(fā)有所幫助！