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

css 纯css轮播图 示例的更多相关文章

  1. HTML+CSS+Javascript实现轮播图效果

    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...

  2. 纯js轮播图练习-1

    偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...

  3. 纯CSS3轮播图

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. 纯HTML和CSS实现JD轮播图

    博主使用了纯HTML和CSS实现了JD的轮播图,没有加动态效果,主要是使用了定位的知识.  ,如图为两个侧边箭头图片(其实实际中应该使用CSS3的图标字体,这里没有使用). <!DOCTYPE ...

  5. css3 - 纯css实现一个轮播图

    这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...

  6. 纯js轮播图练习-2,js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  7. jquery里面的attr和css来设置轮播图竟然效果不一致

    /*封装$*/ // window.$=HTMLElement.prototype.$=function(selector){ // var elems=(this==window?document: ...

  8. css动画属性--轮播图效果

    通过css的动画属性实现轮播图的显示效果 代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...

  9. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

随机推荐

  1. 小程序和wepy做循环渲染如何点击拿到相对应的值

    数据和其他的就忽略,简单上手,wepy的for渲染方式改成对应的就行,传参触发不用改 <view wx:for="{{list}}"> {{item.title}} & ...

  2. cogs 1588. [USACO Feb04]距离咨询 倍增LCA

    1588. [USACO Feb04]距离咨询 ★★   输入文件:dquery.in   输出文件:dquery.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述] 农夫 ...

  3. 关于neo4j初入门(3)

    这一章主要是函数的部分 UPPER 它需要一个字符串作为输入并转换为大写字母. UPPER (<input-string>)<input-string>可以是来自Neo4J数据 ...

  4. leetcode 最大水池

    leetcode 11题 水池最大容积 题目描述 给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 ( ...

  5. Java入门 - 导读

    原文地址:http://www.work100.net/training/java 更多教程:光束云 - 免费课程 Java入门 Java 是由 Sun Microsystems 公司于1995年5月 ...

  6. Drupal SA-CORE-2019-010 .开头文件名(如.htaccess) 文件上传

    目录 drupal .开头文件名 文件上传 原生模块分析 第三方模块分析 补丁 参考 drupal .开头文件名 文件上传 通过diff 8.8.1的补丁,很容易发现修复点,位于core\module ...

  7. Windows10系统配置telnet服务的方法

    通常情况下,Windows10正式版系统的telnet服务都是处于关闭状态的,需要我们手动开启才可以.telnet服务可以调试端口,其重要性不容小视.今天,系统城小编就教大家如何配置telnet服务. ...

  8. ps入门

    目标:把运动截图的日期改掉.一次运动,天天装逼! 1 左上角   文件 -> 打开  选中要P的图片 2 CRTL 和 +号  放大 3 摁住空格键就可以用鼠标拖动图片(把要P的部分放到中间) ...

  9. .net core之编辑json配置文件

    .net core之编辑json配置文件 引言 最近在具体项目开发应用中,项目采用的json格式配置文件,配置文件的加载采用的IConfiguration接口对象进行的管理,这是.net standa ...

  10. 团队项目-Beta冲刺1

    博客介绍 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience 这个作业要求在哪里 https://w ...