C3增加了很多新的内容,其中动画部分更是分担了js引擎的内容,今天小编来分享一种简单的轮播图制作方法。
首先搭建两个嵌套关系的盒子,盒子最内部放入轮播图素材。
<section>
<div>
<img src="./img/01.jpg" alt="">
<img src="./img/02.jpg" alt="">
<img src="./img/03.jpg" alt="">
<img src="./img/04.jpg" alt="">
<img src="./img/01.jpg" alt="">
<img src="./img/02.jpg" alt="">
<img src="./img/03.jpg" alt="">
<img src="./img/04.jpg" alt="">
</div>
</section>
接下来就是css部分了,首先我们需要搭建嵌套关系的盒子框架。
最外层的盒子作为展示框,内部的盒子作为轮播框,因此,外层盒子添加overflow属性隐藏溢出元素。
* {
margin: 0;
padding: 0;
}
img {
width: 200px;
height: 100px;
}
section {
width: 200px;
height: 100px;
overflow: hidden;
margin: auto;
}
接下来就是动画部分了。
@keyframes lunbo {
0% {
transform: translate(0 ,0);
}
25% {
transform: translate(0 ,200px);
}
50% {
transform: translate(0 ,400px);
}
75% {
transform: translate(0 ,600px);
}
100% {
transform: translate(0 ,800px);
}
}
动画定义完成之后就是调用动画,这里采用的spets属性,来保证轮播图的停顿感觉。
div {
width: 1600px;
height: 100px;
font-size: 0;
animation: lunbo 10s infinite;
}
接下来就是完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 200px;
height: 100px;
}
section {
width: 200px;
height: 100px;
overflow: hidden;
margin: auto;
}
div {
width: 1600px;
height: 100px;
font-size: 0;
animation: lunbo 10s infinite;
}
@ @keyframes lunbo {
0% {
transform: translate(0 ,0);
}
25% {
transform: translate(-200px,0);
}
50% {
transform: translate(-400px,0);
}
75% {
transform: translate(-600px,0);
}
100% {
transform: translate(-800px,0);
}
}
</style>
</head>
<body>
<section>
<div>
<img src="./img/01.jpg" alt="">
<img src="./img/02.jpg" alt="">
<img src="./img/03.jpg" alt="">
<img src="./img/04.jpg" alt="">
<img src="./img/01.jpg" alt="">
<img src="./img/02.jpg" alt="">
<img src="./img/03.jpg" alt="">
<img src="./img/04.jpg" alt="">
</div>
</section>
</body>
</html>