* { margin:0; padding:0; } .swiper-content { width:400px; height:200px; margin:90px auto; overflow:hidden; border:1px solid rosybrown; } .swiper-content ul { width:1200px; /* 300% */ transition:all 4s linear; animation:swiper 10s linear infinite alternate; /* 交替运动 */ } ul:hover:hover { /* 停止动画 */ animation-play-state:paused; } @keyframes swiper { /* from { transform:translateX(0px); opacity:0.9; } to { transform:translateX(-800px); opacity:1; } */ 0% { transform:translateX(0px); opacity:0.7; } 25% { transform:translateX(-200px); opacity:0.8; } 50% { transform:translateX(-400px); opacity:0.9; } 75% { transform:translateX(-600px); opacity:1; } 100% { transform:translateX(-800px); opacity:1; } }li { list-style:none; float:left; } img { width:400px; height:200px; box-sizing:border-box; border:2px solid red; }
更新时间:2022-12-02 23:43:23
纯css3 无缝轮播