CSS 拋物線動畫效果是一種炫酷的動畫效果,可以讓網頁更具吸引力。拋物線動畫是使用貝塞爾曲線來實現的,可以控制元素的運動軌跡和速度。下面是一個 CSS 拋物線動畫的實現:
.animation { position: absolute; width: 50px; height: 50px; background-color: #ff9900; border-radius: 50%; animation-name: parabola; animation-duration: 1s; animation-timing-function: cubic-bezier(.17,.67,.83,.67); } @keyframes parabola { 0% { left: 0; top: 0; opacity: 1; } 100% { left: 200px; top: 400px; opacity: 0; } }
上面的代碼實現了一個橘黃色的小球沿著一條拋物線飛行,并在結束時消失。下面是關于這段代碼的解釋:
1. 聲明一個 .animation 類,其中包含了小球的樣式。
2. 使用 position: absolute; 和 animation-name: parabola; 來控制小球的位置和動畫效果。
3. 使用 animation-duration: 1s; 來控制動畫的持續時間。
4. 使用 animation-timing-function: cubic-bezier(.17,.67,.83,.67); 來控制小球的速度和運動軌跡。
5. 聲明一個名為 parabola 的 keyframe 動畫,其中定義了小球在開始和結束時的位置和不透明度。
6. 在 .animation 類中添加了 animation 屬性來應用 parabola 動畫。
通過上面的代碼和解釋,我們可以看到 CSS 拋物線動畫效果的實現過程。希望這篇文章能對您有幫助。