怎样用纯css做出轮播图效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎样用纯css做出轮播图效果相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<style type="text/css">
#frameposition:absolute;width:302px;height:200px;overflow:hidden;border-radius:5px
#disposition:absolute;left:-50px;top:-10px;opacity:.5
#dis lidisplay:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color:#fff;border-radius:10px;background:#000
#photos .imgfloat:left;width:300px;height:200px;background-color:red;border-left:1px solid blue;
#photos position: absolute;z-index:9; width: calc(301px * 4);/*---修改图片数量的话需要修改下面的动画参数*/
.play animation: ma 5s ease-out infinite alternate;
@keyframes ma
0%,25% margin-left: 0px;
30%,50% margin-left: -300px;
55%,75% margin-left: -600px;
80%,100% margin-left: -900px;
</style>
</head>
<body>
<div id="frame" >
<div id="photos" class="play">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<ul id="dis">
<li>111111111111111</li>
<li>22222222222222</li>
<li>33333333333333</li>
<li>44444444444444</li>
</ul>
</div></div>
</body></html> 参考技术A 没有显示效果图，不知道是为什么。
CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）
参考技术A 简单demo：使用HTML+CSS 实现轮播图（三张图为例，分别为：红、绿、蓝）的效果。不能发视频，截图来代替吧
1.显示 轮播图1（实际轮播的第2个元素li）
2.显示 轮播图2（实际轮播的第3个元素li）
3.显示 轮播图3（实际轮播的第4个元素li）
4.显示 轮播图1（实际轮播的第5个元素li,之后会紧跟着重复以上动作）
以上是关于怎样用纯css做出轮播图效果的主要内容，如果未能解决你的问题，请参考以下文章