css 实现轮播图效果_代码007(未授权)

实现轮播图效果主要用到 overflow、animation、animation–direct ion、transform这几个属性

属性	作用
overflow	主要用于设置盒子的属性,规定当内容溢出元素框时发生的事情,这个属性主要有这个设置值
animation	设置元素的动画效果
ani m a t ion-direct ion	用来定义是否应该轮流反向播放动画的
transform	描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行旋转,倾斜,缩放,移动,以及矩阵变形 matrix。

1.第一步：编写 html 文件，写两个 div，一个用来展示图片，一个用来存放所有图片。
代码如下：

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/RotationChart.css">
</head>
<body>
    <div class="continer">
        <div class="child">
            <img src="./img/1.jpg" >
            <img src="./img/2.jpg" >
            <img src="./img/3.jpg" >
            <img src="./img/4.jpg" >
            <img src="./img/5.jpg" >
        </div>
    </div>
</body>
</html>

2.第二步：编写 css 样式
首先需要定义 continer 容器的样式,还有每张图片的大小

.continer{
    margin: 100px auto;
    height: 300px;
    width: 400px;  
    border:4px solid blue;
    overflow: hidden;
    background-color: red;
    position: relative;
}
img{
    height: 300px;
    width: 400px;
}

效果：
在这里插入图片描述

可以看到展示图片的框框显示了出来，如果没加over flow: hidden;这个属性的话就是下面这个样子
在这里插入图片描述

.child{
    display: flex;
    height: 300px;
    width: 2000px;
    animation:video 20s infinite;
	animation-direction:alternate;
}

@keyframes video {
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(-400px);
    }
    50%{
        transform: translateX(-800px);
    }
    75%{
        transform: translateX(-1200px);
    }
    100%{
        transform: translateX(-1600px);
    }
}

body{
    margin:0px;
}
.continer{
    margin: 100px auto;
    height: 300px;
    width: 400px;  
    border:4px solid blue;
    overflow: hidden;
    background-color: red;
    position: relative;

}
@keyframes video {
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(-400px);
    }
    50%{
        transform: translateX(-800px);
    }
    75%{
        transform: translateX(-1200px);
    }
    100%{
        transform: translateX(-1600px);
    }
}

.child{
    display: flex;
    height: 300px;
    width: 2000px;
    animation:video 20s infinite;
	animation-direction:alternate;
}

img{
    height: 300px;
    width: 400px;
}