css 纯css轮播图 示例
2024-10-17 21:51:48
<!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>
最新文章
- C#遍历XML文件动态加载菜单
- .NET面试题解析(04)-类型、方法与继承
- jQuery：常用方法一览
- mysql 分表策略
- Upgrading to Java 8——第四章 The Stream API
- CSS属性值一览
- LeetCode_Regular Expression Matching
- HTML5 file api读取文件的MD5码工具
- Objective-C中NSArray和NSMutableArray的基本用法
- ActiveMq实例
- EMQ消息队列初体验
- oralce的function处理考勤时间节点以及计算工作时间
- 微信小程序开发(2) 计算器
- 【LeetCode每天一题】 Merge k Sorted Lists(合并K个有序链表)
- hasura graphql-engine集成pgbouncer 连接池工具
- java web 3.1-web.xml文件配置
- html圆形头像的制作
- [转]HSpice仿真
- 老齐python-基础7(文件操作、迭代)
- 第60天：js常用访问CSS属性的方法