您的位置：首页 > Web前端 > CSS

只用css和html实现简单的图片轮播效果

2019-04-23 15:08 295 查看

用css和html实现简单的图片轮播效果

三种方式：
1.html的代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css动画</title>
<style>
.one {
width: 400px;
height: 300px;
animation-name: move;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@keyframes move {
0% {
background-image: url("./image/1.jpg");
background-size: cover;
}
20% {

background-image: url("./image/2.jpg");
background-size: cover;
}
40% {

background-image: url("./image/5.jpg");
background-size: cover;
}
60% {

background-image: url("./image/4.jpg");
background-size: cover;
}
80% {

background-image: url("./image/6.jpg");
background-size: cover;
}
100% {

background-image: url("./image/1.jpg");
background-size: cover;
}
}
</style>
</head>
<body>
<div class="one">

</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css实现轮播效果</title>
<style type="text/css">
.one {
position: absolute;
width: 500px;
height: 400px;
overflow: hidden;
}
.one_cantent img {
width: 500px;
height: 300px;
float: left;
}
.one_cantent {
width: 2500px;
height: 400px;
position: absolute;
left: 0px;
animation-name: move;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@keyframes move {
0% {
left: 0px;
}
25% {
left: -500px;
}
50% {
left: -1000px;
}
75% {
left: -1500px;
}
100% {
left: -2000px
}
}
</style>
</head>
<body>
<div class="one">
<div class="one_cantent">
<img src="./image/0.jpg">
<img src="./image/1.jpg">
<img src="./image/2.jpg">
<img src="./image/3.jpg">
<img src="./image/4.jpg">
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="one">
<img src="./image/1.jpg" alt="">
</div>
<div class="two">
<img src="./image/2.jpg" alt="">
</div>
<div class="three">
<img src="./image/3.jpg" alt="">
</div>

</body>
</html>

4.css的代码

*{
margin: 0;
padding: 0;
}
.one img{
position: absolute;
width: 400px;
height:200px;
}
.two img{
position: absolute;
width: 400px;
height: 200px;
}
.three img{
position: absolute;
width: 400px;
height:200px;
}
.three {
animation-name: cantoons;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.two {
animation-name: cantoons2;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.one {
animation-name: cantoons1;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@keyframes cantoons{
0% {
opacity: 1;
}
35% {
opacity: 0;
}
70% {
opacity: 0;
}
100% {
opacity: 1;
}

}
@keyframes cantoons2{
0% {
opacity: 0;
}
35% {
opacity: 1;
}
70% {
opacity: 0;
}
100% {
opacity: 0;

}
}
@keyframes cantoons1{
0% {
opacity: 0;
}
35% {
opacity: 0;
}
70% {
opacity: 1;
}
100% {
opacity: 0;

}
}

源码链接：https://pan.baidu.com/s/1dapmuzyKkodlPKYFGjP3vQ
提取码：jitq

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航