使用css制作轮播图
<!--HTML代码-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 轮播图在一轮动画结束之后有一个很突兀的跳到开始的第一个元素，出现一种很不协调的感觉，为了消除这种感觉,让效果看起来像是轮播,最简单的办法就是在最后一个元素后面添加第一个元素 -->
<div class="user">
<div class="user-inner container">
<div class="iphone">
<div class="iphone-inner">
<ul>
<li><img src="data:images/ui01.jpg" alt="pic"></li>
<li><img src="data:images/ui02.jpg" alt="pic"></li>
<li><img src="data:images/ui03.jpg" alt="pic"></li>
<li><img src="data:images/ui04.jpg" alt="pic"></li>
<li><img src="data:images/ui05.jpg" alt="pic"></li>
<li><img src="data:images/ui06.jpg" alt="pic"></li>
<!--在这里添加一个图片1，用于动画结束后跳转到animation执行前的时候不出现空档-->
<li><img src="data:images/ui01.jpg" alt="pic"></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
<!--接下来是css的代码-->
.user{
min-height: 808px;
}
.container{
width: 1000px;
margin:0 auto;
}
.user-inner{
min-width: 808px;
}
.iphone{
width: 193px;
height: 408px;
background: url(../images/ui-phone.png) no-repeat;
position:relative;
}
.iphone-inner{
width: 167px;
height: 295px;
background-color: red;
position: absolute;
top: 57px;
left: 14px;
overflow: hidden;
}
.iphone-inner:hover ul{
animation-play-state:paused;
}
.iphone-inner ul{
width: 1169px;
position: absolute;
top: 0;
left: 0;
<!--设置anmation属性-->
animation:imggo 10s linear infinite;
}
.iphone-inner ul li{
float: left;
}
.iphone-inner ul li img{
width: 167px;
height: 295px;
}
<!--设置关键帧，给图片轮播的过程和图片的暂停分别甚至时间-->
@keyframes imggo{
0%{
left:0;
}
10%{
left:0;
}
16.66%{
left:-167px;
}
26.66%{
left:-167px;
}
33.33%{
left:-334px;
}
43.33%{
left:-334px;
}
50%{
left:-501px;
}
60%{
left:-501px;
}
66.66%{
left:-668px;
}
76%{
left:-668px;
}
83.33%{
left:-835px;
}
93.33%{
left:-835px;
}
100%{
left:-1002px;
}
}
最新文章
- centos 7 安装mono 和 monodevelop
- ASP.NET Core 中文文档 第四章 MVC（01）ASP.NET Core MVC 概览
- HDU 5792---2016暑假多校联合---World is Exploding
- C#----格式化字符串的操作
- JSOUP选择器语法说明
- 英文缩写&名词
- 时间与NSString转换
- 【iCore系列核心板视频教程】之 SDRAM 读写实验
- Android小项目之四 自动更新检查的逻辑
- Java网络编程(TCP协议-练习-上传文本文件)
- C++控制台程序中使用定时器
- weex 启动 ios 模拟器
- IT轮子系列（七）——winform 版本更新组件
- webpack学习笔记——打包后直接访问页面，图片路径错误
- [SDOi2012]吊灯
- Java容器解析系列(1) 迭代的进化——从Enumeration到Iterator
- HTTPS加密越来越流行，为何要加密？
- iOS Socket编程-C语言版（UDP）
- P5231 [JSOI2012]玄武密码
- Spring Boot 2.0 Intellij Idea 中图文详解打包成可执行Jar