Implementation method: first define multiple slide elements; then use "@keyframes" rules and animation attributes to define animations; then define key frames in the animation according to the number of slides; finally use "transform" in the key frames :translateX()" style to achieve switching effect.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
2D conversion through transfrom attribute
html code:
<section id=box>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>1</li>
</ul>
</section>css code:
<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>Recommended learning: css video tutorial
The above is the detailed content of How to achieve slide effect with css. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
