所属分类：web前端开发
实现方法：首先定义多张幻灯片元素；然后使用“@keyframes”规则和animation属性定义动画；接着在动画中根据幻灯片数量定义关键帧；最后在关键帧中使用“transform:translateX()”样式实现切换效果。
前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
通过transfrom属性进行2D转换
html代码：
微博登录
QQ登录<section id=box>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>1</li>
</ul>
</section>登录后复制css代码：
<style>
* {
margin: 0;
padding: 0;
font-family: 微软雅黑;
list-style: none;
}
#box{
width:400px;
height:200px;
border: 1px solid #000;
margin: 50px auto;
overflow: hidden;
}
ul{
width: 2000px;
animation: dh 10s infinite ease;
}
ul li{
width:400px;
height:200px;
float: left;
}
ul li:nth-child(1){
background:#4b86db;
}
ul li:nth-child(2){
background:#ff9999;
}
ul li:nth-child(3){
background:olivedrab;
}
ul li:nth-child(4){
background:skyblue;
}
ul li:nth-child(5){
background:#4b86db;
}
@keyframes dh {
0%{transform: translateX(0)}
25%{transform: translateX(-400px)}
50%{transform: translateX(-800px)}
75%{transform: translateX(-1200px)}
100%{transform: translateX(-1600px)}
}
</style>登录后复制推荐学习：css视频教程
以上就是css如何实现幻灯片效果的详细内容，更多请关注zzsucai.com其它相关文章！
