css 纯css轮播图 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>纯css动画实现轮播图展示</title>
<link rel="stylesheet" charset="utf-8" href="style.css" />
<style>
@keyframes move{
0%{
transform:translateX(0%);
}
20%{
transform:translateX(0%);
}
25%{
transform:translateX(-500px);
}
45%{
transform:translateX(-500px);
}
50%{
transform:translateX(-1000px);
}
70%{
transform:translateX(-1000px);
}
75%{
transform:translateX(-1500px);
}
95%{
transform:translateX(-1500px);
}
100%{
transform:translateX(-2000px);
}
}
.wrap{
width:500px; height:320px;
position:relative; margin:50px auto;
border:5px solid #f00;
overflow:hidden;
}
ul,li{margin:0; padding:0; list-style:none;}
img{vertical-align: top; border:none;}
.list{width:500%; animation: move 7s linear infinite}
.list li{float:left; width:500px; height:320px;}
.list img{width:100%; height:100%;}
</style>
</head>
<body>
<!-- <div id="boxId" class="boxClass">
<canvas id = "canvasId" width = 500 height = 500></canvas>
</div>
<script type = "text/javascript" src = "main.js" ></script> -->
<div class="wrap">
<ul class="list">
<li><img src="0-1.png" alt=""/></li>
<li><img src="0-3.png" alt=""/></li>
<li><img src="0-4.png" alt=""/></li>
<li><img src="0-6.png" alt=""/></li>
<li><img src="0-7.png" alt=""/></li>
</ul>
</div>
</body>
</html> 相关推荐
sunshineboyleng 2020-07-08
impress 2020-05-11
yaodilu 2020-04-30
/*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，并针对不同浏览器进行兼容。-- 在外层添加一个div，把行内容居中，添加.row .justify-content-center -->
Phoebe的学习天地 2020-04-14
福叔 2020-04-11
zjuwangleicn 2020-03-08
冰蝶 2020-03-01
somboy 2020-02-29
zengni 2020-02-23
wangjie 2020-02-22
tianzyc 2020-02-19
lanzhusiyu 2020-02-03
lanzhusiyu 2020-01-12
MaureenChen 2020-01-01
jiedinghui 2019-12-27
zhanghao 2019-12-20
bertzhang 2019-12-14
impress 2019-12-13