CSS平拋運動是一種常見的網頁特效,通過使用CSS動畫,將一個元素以平拋的方式移動到另一個位置。
.element{ position: absolute; animation: throw 1s ease-in-out forwards; } @keyframes throw{ 0%{ transform: translate(0,0); } 50%{ transform: translate(300px, -200px); } 100%{ transform: translate(500px, 0); } }
以上代碼是一個CSS平拋運動的基本設置。我們首先需要定義一個元素,將其位置設置為絕對定位(absolute),這樣我們就能夠自由地控制它的移動。接著,我們使用animation屬性,將動畫throw應用到這個元素上,并設置動畫時長為1秒,過渡效果為ease-in-out,最后一個參數forwards表示動畫結束后,元素的狀態將保留在最后一幀,即停在目標位置。
而在@keyframes中,我們定義動畫的運動軌跡。0%表示動畫開始的狀態,這里我們將元素的位置設置為原點(translate(0,0))。50%表示動畫進行到一半的狀態,我們將元素向右移動300px,向上移動200px(translate(300px, -200px))。最后,100%表示動畫結束的狀態,我們再將元素向右移動200px(translate(500px, 0))。
通過這樣的代碼,我們就能夠實現一個簡單的CSS平拋運動。當然,我們還可以根據需求調整動畫的屬性,例如加入旋轉、調整速度等等,讓運動更加生動有趣。
下一篇css平臺安全嗎