<!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. Scala实践2

    一.Scala基本类型和操作 1.1  基本类型 Scala的基本类型与Java基本类型相同,都是byte.short.int.long.char.string.float.double.boolea ...

  2. dp-最大连续子序列的和

    https://www.felix021.com/blog/read.php?1587 什么是最大连续子序列和呢 ? 最大连续子序列和是所有子序列中元素和最大的一个 . 问题 : 给定一个序列 { - ...

  3. 村庄之间建立邮局 - 区间 dp

    There is a straight highway with villages alongside the highway. The highway is represented as an in ...

  4. poj 2689 区间素数筛

    The branch of mathematics called number theory is about properties of numbers. One of the areas that ...

  5. Pycharm 中的翻译工具

    对于开发来说,大多数哥们英文欠缺,比如在下,我们大多数使用的开发工具是IDEA,IDEA 很强大,开发起来顺手. 废话不多说,让我们看一下如何使用翻译器. 打开Pycharm 的setting 设置, ...

  6. Python的re模块，正则表达式用法详解，正则表达式中括号的用法

    Python的re模块,正则表达式 #导入re模块 import  re 1.match方法的使用: result = re.match(正则表达式,待匹配的字符串) 正则表达式写法: 第一部分: 字 ...

  7. 玩转Django2.0---Django笔记建站基础十二(Django项目上线部署)

    第十二章 Django项目上线部署 目前部署Django项目有两种主流方案:Nginx+uWsGI+Django或者Apache+uWSGI+Django.Nginx作为服务器最前端,负责接收浏览器的 ...

  8. 调用Excel.Application报错的解决方法

    之前由于装了WPS后,VBA和python调用某些OFFICE的端口一直报错.网上找了无数的解决办法.也没有解决. 将注册表清理.不行. 将WPS卸载.不行. 将office重装.不行. 之后找到了个 ...

  9. 大叔 Frameworks.Entity.Core 3 Predicate

    Frameworks.Entity.Core\Commons\Predicate\ 1LinqEntity.cs /// IQueryable扩展方法:条件过滤与排序功能    /// Modify ...

  10. c#数字图像处理（十）图像缩放

    图像几何变换(缩放.旋转)中的常用的插值算法 在图像几何变换的过程中,常用的插值方法有最邻近插值(近邻取样法).双线性内插值和三次卷积法. 最邻近插值: 这是一种最为简单的插值方法,在图像中最小的单位 ...