CSS實現下落左右效果可以用到CSS3動畫特性,在pre標簽內編寫以下代碼:
/* 設置動畫元素的樣式 */ .box { position: absolute; top: -100px; /* 初始頂部位置 */ left: 0; /* 初始左側位置 */ animation: animate 4s linear infinite; /* 使用animate動畫,4秒一次循環 */ } /* 編寫動畫 */ @keyframes animate { 0% { transform: translateX(0); /* 完全沒有移動 */ } 25% { transform: translateX(300px); /* 向右移動300像素 */ } 50% { transform: translateX(0); /* 回到原位置 */ } 75% { transform: translateX(-300px); /* 向左移動300像素 */ } 100% { transform: translateX(0); /* 回到原位置 */ } }
以上就是CSS實現下落左右效果的代碼,可以根據實際需要調整相關參數。需要注意的是,動畫元素必須使用position:absolute屬性才能實現下落效果。
上一篇css實現動態div大小
下一篇css實現會員注冊協議