<!--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;
　　}
}

使用css制作轮播图的更多相关文章

  1. 基于css制作轮播图的部分效果

    在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...

  2. 用 CSS 做轮播图

    对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webki ...

  3. 纯CSS实现轮播图效果，你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  4. 基于zepto使用swipe.js制作轮播图demo

    在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用 它是一个纯javascript工具,不需 ...

  5. 拓展-教你手把手用纯CSS写轮播图

    先看成品图[示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html一.随便说几句####css3动画效果的强大 ...

  6. 使用css实现轮播图

    使用css3实现图片轮播 前言:实现图片轮播的方式有很多种 ,例如js ,css 等等. 本文主要讲述使用纯css3实现轮播图 工具介绍: 使用的编辑器: Hbuilder 进入正题 html代码: ...

  7. 纯css实现轮播图

    轮播图的实现原理其实是比较简单的 举个例子 <div class="main"> <div class="div-main"></ ...

  8. marquee标签制作轮播图

    http://qy-0824.blog.163.com/blog/static/725075422011214142226/ 缺点是仅能控制轮播的速度.鼠标悬停暂停等,并不能给其指定链接.触摸滑动.分 ...

  9. slider插件制作轮播图

    html代码: <div id="banner_tabs" class="flexslider"> <ul class="slide ...

随机推荐

  1. ooday05 JAVA_static final_抽象方法_抽象类

    final:最终的,不可改变的-----------单独应用几率低 修饰变量:变量不能被改变 //演示final修饰变量 class Aoo{ final int num = 5; void show ...

  2. GFS分布式文件系统

    一.文件系统简介1.文件系统的组成接口:文件系统接口功能模块(管理.存储的工具):对对象管理里的软件集合对象及属性:(使用此文件系统的消费者)2.文件系统的作用从系统角度来看,文件系统时对文件存储设备 ...

  3. jdbc 04: 配置连接信息

    jdbc连接mysql,将需要的信息配置到文件中 package com.examples.jdbc.o4_配置连接信息; import java.sql.Connection; import jav ...

  4. ZJOI2016 小星星 题解

    我一生之敌是状压 本文发表于 洛谷博客:https://www.luogu.com.cn/blog/LoveMC/solution-p3349 Cnblogs:https://www.cnblogs. ...

  5. C# 虚方法、抽象方法

    一.虚方法(virtual) 作用:当有一个定义在类中的函数需要在继承类中实现时,可以使用虚方法. 示例: class Person { public virtual void XXX() { Con ...

  6. 『叶问』#41，三节点的MGR集群，有两个节点宕机后还能正常工作吗

    『叶问』#41,三节点的MGR集群,有两个节点宕机后还能正常工作吗 每周学点MGR知识. 1. 三节点的MGR集群,有两个节点宕机后还能正常工作吗 要看具体是哪种情况. 如果两个节点是正常关闭的话,则 ...

  7. 树莓派4B无屏幕连接Wi-Fi/启用ssh/创建用户

    前边总得说点什么 最近每次在Win10上写代码需要启动Redis,残血Redis For Windows有卡死系统的bug.由于主机内存不大够用(已经扩到顶了),开虚拟机运行Redis更别提了..想起 ...

  8. ceph 008 ceph多区域网关(ceph对象容灾) cephfs文件系统

    clienta作为集群的管理人员.一部分.他是需要秘钥与配置文件的 但真正服务端只需要通过curl就好 ceph 多区域网关 对象存储容灾解决方案 zone与zone会做数据同步. 把会做同步的rgw ...

  9. 造序列（构造，DP）

    题面 Sample Input 7 8 7 10 31 20 100 869120 Sample Output 6 1 1 4 5 1 4 7 1 9 1 9 8 1 0 8 1 9 4 9 1 0 ...

  10. 四 多例模式【Multition Pattern】 来自CBF4LIFE 的设计模式

    出现在明朝,那三国期间的算不算,不算,各自称帝,各有各的地盘,国号不同.大家还记得那首诗<石灰吟>吗?作者是谁?于谦,他是被谁杀死的?明英宗朱祁镇,对,就是那个在土木堡之变中被瓦刺俘虏的皇 ...