轮播图效果
<style>
@keyframes swiper {
0%{transform: translateX(0);}
28%{transform: translateX(0);}
33%{transform: translateX(-300px);}
61%{transform: translateX(-300px);}
66%{transform: translateX(-600px);}
95%{transform: translateX(-600px);}
100%{transform: translateX(-900px);}
}
#box{width: 300px;
height: 200px;
border: 2px solid;
overflow: hidden;
}
#box>div>div{
width: 300px;
height: 200px;
font-size: 50px;
text-align: center;
line-height: 200px;
float: left;
}
#box>div{
width: 9999px;
height: 200px;
animation: swiper 10s linear infinite;
}
</style>
</head>
<body>
<div id="box">
<div>
<div style="background: lightblue;">1</div>
<div style="background: lightpink;">2</div>
<div style="background: lightgoldenrodyellow">3</div>
<div style="background: lightblue;">1</div>
</div>
</div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了