纯css实现幻灯片代码
很多幻灯片效果都是通过js+css实现的,现在提供一个纯css实现幻灯片效果,如果需要添加图片或其他美化效果,请自行添加。源文件:
<html>
<head>
<meta charset="utf-8">
<link href="css/test.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="contain">
<ul class="slide-auto">
<li class="one">one</li>
<li class="two">two</li>
<li class="three">three</li>
</ul>
</div>
</div>
</body>
</html>
css代码如下:
.contain{
position: relative;
margin:auto;
width: 600px;
height: 200px;
text-align: center;
font-family: Arial;
color: #FFF;
overflow: hidden;
}
.contain ul{
margin:10px 0;
padding:0;
width: 1800px;
transition:all 0.5s;
}
.contain li{
float: left;
width: 600px;
height: 200px;
list-style: none;
line-height: 200px;
font-size: 36px;
}
.one{
background: #9fa8ef;
}
.two{
background: #ef9fb1;
}
.three{
background: #9fefc3;
}
.contain .slide-auto{
animation:marginLeft 10.5s infinite;
}
@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: 0;}
}
另一个
源代码:
<div id="container">
<div id="photo">
<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
</div>
css:
#container {
width: 400px;
height: 300px;
overflow: hidden;
}
#photo {
width: 1200px;
animation: switch 5s ease-out infinite;
}
#photo > img {
float: left;
width: 400px;
height: 300px;
}
@keyframes switch {
0%, 25% {
margin-left: 0;
}
35%, 60% {
margin-left: -400px;
}
70%, 100% {
margin-left: -800px;
}
页:
[1]