CSS如何設置輪播速度?
.slideshow{ animation-name: slide; animation-duration: 3s; /* 設置輪播速度為3秒 */ animation-iteration-count: infinite; /* 設置輪播無限循環 */ } @keyframes slide{ 0%{ opacity: 0; /* 設置初始圖片透明度為0,即不可見 */ transform: translateX(-100%); /* 將圖片向左平移100% */ } 25%{ opacity: 1; /* 25%時間時,圖片完全顯示,即透明度為1 */ transform: translateX(0); /* 平移回原位置 */ } 100%{ opacity: 0; /* 100%時間時,圖片透明度回到0,即不可見 */ transform: translateX(100%); /* 平移回原位置 */ } }
在CSS中,輪播可以使用動畫(animation)和關鍵幀(@keyframes)來實現。通過設置動畫的duration屬性,即可設置輪播速度。同時,可以通過設置animation-iteration-count屬性來無限循環輪播。
上一篇css如何設置翻頁效果
下一篇css如何計算盒子尺寸