CSS3是前端開發中重要的一個部分,它為我們帶來了越來越豐富的交互效果。其中之一就是左右移動動畫,可以給頁面帶來更加動態的效果。
.move { width: 100px; height: 100px; margin: 50px auto; position: relative; background-color: yellow; animation: move 2s infinite; } @keyframes move { 0% { left: 0; } 50% { left: 50%; } 100% { left: 0; } }
首先,我們需要設置移動元素的基本樣式。這里我們選用.class名為move的div元素,設置其寬高為100px,并上下居中顯示。background-color設置為黃色,可以根據需要自行更改。
接下來,我們需要設置動畫效果。我們使用@keyframes關鍵字來定義動畫,move為動畫名。我們將動畫定為2s循環播放,即infinite。這里我們將定義動畫從0%到100%的狀態,即從移動元素左側開始到右側結束,再回到左側,形成左右移動的效果。
在動畫中,我們使用left屬性來移動元素,從0開始到50%,即元素向右移動50%的距離;然后從50%到100%,元素又回到原始的位置,即元素向左移動50%距離。
通過上述代碼,我們就成功地實現了一個簡單的左右移動動畫。可以根據實際需要調整元素的樣式和動畫效果,將其應用到頁面中,增添頁面的動態效果。
上一篇java 調用vue
下一篇mysql輸出中文文件名