CSS3提供了強大的貝塞爾曲線(bezier curve)繪制功能。利用貝塞爾曲線,我們可以創建出各種形狀的動畫,使得網頁變得更加生動有趣。
/* 畫一條線段 */ .line{ position: absolute; left: 0px; top: 0px; width: 200px; height: 1px; background-color: #333; } /* 使用貝塞爾曲線將線段平移 */ .line.move{ animation: move-line 2s ease-out forwards; } @keyframes move-line{ 0%{ transform: translateX(0px); } 100%{ transform: translateX(200px); } } /* 使用貝塞爾曲線將線段旋轉 */ .line.rotate{ animation: rotate-line 2s ease-in-out forwards; } @keyframes rotate-line{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } /* 使用貝塞爾曲線將線段彎曲 */ .line.bend{ animation: bend-line 2s ease-in-out forwards; } @keyframes bend-line{ 0%{ transform: skewX(0deg); } 100%{ transform: skewX(30deg); } }
在上述代碼中,我們使用了三個不同的貝塞爾曲線動畫。首先是一個簡單的平移動畫,使用ease-out緩動函數,使得移動速度先快后慢。接著是一個旋轉動畫,使用ease-in-out緩動函數,使得旋轉速度先慢后快再慢,呈現出類似于逐漸加速和逐漸減速的效果。最后一個動畫是將線段彎曲,使用skewX()變形函數,使得線段呈現出30度的傾斜。
需要注意的是,貝塞爾曲線不是一種具體的動畫函數或者屬性,而是一種可以被其他動畫函數或者屬性調用的數學公式。在上述代碼中,我們使用了transform屬性來實現平移、旋轉和彎曲,而使用了animation屬性來調用貝塞爾曲線動畫。在實際開發中,我們可以靈活地使用不同的屬性和值來實現各種形狀的動畫效果。
上一篇css3畫嘴