<!--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. day06 Java_数组_方法_参数

    精华笔记: 数组: 复制: System.arraycopy(a,1,b,0,4); int[ ] b = Arrays.copyOf(a,6); 排序: Arrays.sort(arr); //升序 ...

  2. 【MySQL 8】Generated Invisible Primary Keys(GIPK)

    从MySQL 8.0.30开始,MySQL支持在GIPK模式下运行时生成不可见的主键.在这种模式下运行时,对于任何在没有显式主键的情况下创建的InnoDB表,MySQL服务器会自动将生成的不可见主键 ...

  3. 2499-springboot使用jar形式打包在linux上运行

    由于maven使用的种种问题,以前springboot版本变化较快带来的一些不兼容问题,是否考虑下使用jar形式运行web程序,而不是固守于war包与tomcat: 主要原理有两点: 使用nohup来 ...

  4. 基于阿里云直播实现视频推流(ffmpeg)/拉流(Django2.0)以及在线视频直播播放(支持http/https)功能

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_146 由于5g网络的光速推广,视频业务又被推上了风口浪尖,在2019年初我们还在谈论照片,短视频等关键字,而进入2020年,我们津 ...

  5. 【PMP学习笔记】第4章 项目整合管理

    [PMP学习笔记]第4章 项目整合管理 一.项目整合管理 什么是项目整合管理? 项目整合管理由项目经理负责.虽然其他知识领域可以由相关专家(如成本分析专家.进度规划专家.风险管理专家)管理,但是项目整 ...

  6. 项目应用丨Modbus转Profinet网关连接ABB变频器的现场应用记录

    本案例客户需求是将ABB变频器接入到Profinet网络中,使用设备为西门子1200PLC,ABB变频器以及小疆智控Modbus转profinet网关.1.首先打开西门子组态软件,新建一个项目. 2. ...

  7. MySQL Shell无法拉起MGR集群解决办法

    MySQL Shell无法拉起MGR集群解决办法 用MySQL Shell要重新拉起一个MGR集群时,可能会提示下面的错误信息: Dba.rebootClusterFromCompleteOutage ...

  8. vue2自定义指令-加载指令v-loading和占位图指令v-showimg

    了解自定义指令的钩子函数 bind(){}:每当指令绑定到元素上的时候,就会立刻执行bind这个函数.只调用一次. 和css相关的操作,可以放在这个钩子函数中. inserted(){}:元素插入到D ...

  9. 如何使能512个virtio_blk设备

    一例virtio_blk设备中断占用分析 背景:这个是在客户的centos8.4的环境上复现的,dpu是目前很多 云服务器上的网卡标配了,在云豹的dpu产品测试中,dpu实现的virtio_blk 设 ...

  10. suse 11 sp3编译报错问题

    suse安装,默认是不安装gcc的,今天安装gcc之后,编译suse11 sp3,报错如下: scripts/basic/fixdep.c:106:23: fatal error: sys/types ...