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

.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);
}
}

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

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

最后，我們設置了動畫執行的總時間（2秒），過渡方式（ease-in）和循環次數（infinite），使元素能夠無限旋轉。

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