纯CSS实现banner连续轮播效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.slide {
position: relative;
margin: auto;
width: 600px;
height: 200px;
text-align: center;
font-family: Arial;
color: #FFF;
overflow: hidden;
}
.slide ul {
margin: 10px 0;
padding: 0;
width: 9999px;
transition: all 0.5s;
}
///自动播放/
.slide .slide-auto {
animation: marginLeft 10.5s infinite;
}
.slide li {
float: left;
width: 600px;
height: 200px;
list-style: none;
line-height: 200px;
font-size: 36px;
}
.slide li:nth-child(1) {
background: #9fa8ef;
}
.slide li:nth-child(2) {
background: #ef9fb1;
}
.slide li:nth-child(3) {
background: #9fefc3;
}
.slide li:nth-child(4) {
background: #9fa8ef;
}
@keyframes marginLeft {
0% {
margin-left: 0;
}
28.5% {
margin-left: 0;
}
33.3% {
margin-left: -600px;
}
62% {
margin-left: -600px;
}
66.7% {
margin-left: -1200px;
}
95.2% {
margin-left: -1200px;
}
100% {
margin-left: -1800px;
}
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="slide">
<ul class="slide-auto">
<li>one</li>
<li>two</li>
<li>three</li>
<li>one1</li>
</ul>
</div>
</body>
</html>
网友评论