<!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. Ceph日常运维管理和排错 -- <7>

    Ceph日常运维管理 集群监控管理 集群整体运行状态 [root@cephnode01 ~]# ceph -s cluster: id: 8230a918-a0de-4784-9ab8-cd2a2b8 ...

  2. 探究公钥、私钥、对称加密、非对称加密、hash加密、数字签名、数字证书、CA认证、https它们究竟是什么，它们分别解决了通信过程的哪些问题。

    一.准备 1. 角色:小白.美美.小黑. 2. 剧情:小白和美美在谈恋爱:小黑对美美求而不得.心生怨念,所以从中作梗. 3. 需求:小白要与美美需通过网络进行通信,联络感情,所以必须保证通信的安全性. ...

  3. python条件判断语句

    # 条件判断(if)语句: # 语法1: if 条件表达式 : 单行语句 # 语法2: if 条件表达式 : # 代码块(多行语句) # 执行的流程:if语句在执行时,会先对条件表达式进行求值判断, ...

  4. Spring Boot 2.X(十九)：集成 mybatis-plus 高效开发

    前言 之前介绍了 SpringBoot 整合 Mybatis 实现数据库的增删改查操作,分别给出了 xml 和注解两种实现 mapper 接口的方式:虽然注解方式干掉了 xml 文件,但是使用起来并不 ...

  5. Go的内存对齐和指针运算详解和实践

    uintptr 和 unsafe普及 uintptr 在Go的源码中uintptr的定义如下: /* uintptr is an integer type that is large enough t ...

  6. woj - 将一个问题转换为背包问题

    Problem 1538 - B - Stones II Time Limit: 1000MS   Memory Limit: 65536KB   Total Submit: 428  Accepte ...

  7. Django-视图&网址

    前言 Django第一篇简单的介绍了环境搭建与创建Django项目的两种方式,以及如何启动服务,在前端访问HelloWorld地址,这篇内容首先学习一下Django项目中的各个模块的用途及Django ...

  8. C++ 引用分析

    引用 左值引用,建立既存对象的别名 右值引用,可用于为临时对象延长生命周期 转发引用,保持函数实参的类别 悬置引用,对象生命周期已经结束的引用,访问改引用为未定义行为 值类别,左值,纯右值,亡值 st ...

  9. 每天翻译一点点： WPF Application Framework (WAF)

    ps:http://waf.codeplex.com/wikipage?title=Model-View-ViewModel%20Pattern&referringTitle=Document ...

  10. xsd 和 wsdl

    xsd : 可用方便 不同的语言之间的 用命令行来 转换对应语言的. wsdl: 可用方便不同语言的类描述 用命令行 来相互转换. 类似 thift me ?