接水的时候碰到了公司的一个前端妹子,她向我请教了下轮播图的写法,我就决定在她面前秀一波~
大概效果就是这样了,就是简单的用了CSS3的animation的动画属性,废话少说上代码~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 533px;
height: 300px;
margin: auto;
background-image: url(img/01.jpg), url(img/02.jpg), url(img/03.jpg), url(img/04.jpg), url(img/01.jpg);
background-repeat: no-repeat;
background-position: 0, 533px, 1066px, 1599px, 2132px;
animation: lunbo 15s infinite forwards;
}
@keyframes lunbo {
0% {
background-position: 0, 533px, 1066px, 1599px, 2132px;
}
25% {
background-position: -533px, 0, 533px, 1066px, 1599px;
}
50% {
background-position: -1066px, -533px, 0, 533px, 1066px;
}
75% {
background-position: -1599px, -1066px, -533px, 0, 533px;
}
100% {
background-position: -2132px, -1599px, -1066px, -533px, 0;
}
}
</style>
</head>
<body>
<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=""> -->
</div>
</body>
</html>