<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>无限轮播图</title>

  <style>

    *{

      margin: 0;

      padding: 0;

    }

    div{

      width: 600px;

      height: 188px;

      border: 1px solid #000;

      margin: 100px auto;

      overflow: hidden;

    }

    ul{

      width: 2000px;

      height: 188px;

      background-color: black;

      animation: move 10s linear 0s infinite normal;

    }

    ul li{

      float: left;

      list-style: none;

      width: 300px;

      height: 188px;

      background-color: red;

      border: 1px solid #000;

      box-sizing: border-box;

    }

    ul:hover{

      /*动画添加给谁, 就让谁停止*/

      animation-play-state: paused;

    }

    /*

     半透明，为了显示蒙版

     */

    ul:hover li{

      opacity: 0.5;

    }

    ul li:hover{

      opacity: 1;

    }

    ul li img {

      width: 300px;

      height: 188px;

    }

    @keyframes move {

      from {

        margin-left: 0;

      }

      to {

        margin-left: -1200px;

      }

    }

  </style>

</head>

<body>

<div>

  <ul>

    <li><img src="data:images/banner11.png" alt=""></li>

    <li><img src="data:images/banner11.png" alt=""></li>

    <li><img src="data:images/banner11.png" alt=""></li>

    <li><img src="data:images/banner11.png" alt=""></li>

    <!--这里添加两个，作为平滑的过渡-->

    <li><img src="data:images/banner11.png" alt=""></li>

    <li><img src="data:images/banner11.png" alt=""></li>

  </ul>

</div>

</body>

</html>

CSS3之动画模块实现轮播图的更多相关文章

  1. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  2. CSS3——animation的基础（轮播图）

    作为前端刚入门的小菜鸟,只想记录一下每天的小收获 对于animation动画 1.实现动画效果的组成: (1)通过类似Flash的关键帧来声明一个动画 (2)在animation属性中调用关键帧声明的 ...

  3. Js封装的动画函数实现轮播图

    ---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画         function ...

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

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

  5. 利用CSS3实现图片无间断轮播图的实现思路

    前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过postion的left or right来控制dom的移动,这里我要说的是利用css3来制作轮播!相比以前通过postion来移动do ...

  6. Jquery基础（动画效果的轮播图特效）

    jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jq ...

  7. css3爆炸效果更换图片轮播图

    思路:给一个div设置一个背景图片1.jpg,然后在这个div上面用两个for循环动态的创建一个列数为C行数为R数量的span,并给这些span设置宽高.定位并设置背景图片0.jpg,然后设置每个sp ...

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

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

  9. 云南农职《JavaScript交互式网页设计》 综合机试试卷②——实现轮播图效果

    一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用JQuery淡入淡出动画,实现轮播图效果 每隔2秒钟切换一张 ...

随机推荐

  1. 看书记笔记 书名21天学C#

    ☆:为重点★:为科普△:注▲:术语 前言概述 ☆一门语言必须包括诸如异常处理,无用单元收集,可扩展数据类型以及代码安全性等特征☆C#特性:简单性,面向对象,模块性,灵活性,简明性 ☆C#面向对象的封装 ...

  2. aufac在mvc中多线程

    注册的时候 将容器放到静态变量中    xxx.IocContainer = builder.Build();            var resolver = new AutofacDepende ...

  3. 网上搜集python面试题（更新中......）

    武Sir博客拿的面试题,答案都是自己写的,多有不足,请多多指教.更新中...... 1.为什么学习Python? a.写起来快,看起来明白.作为通用性的语言,除了一些对性能要求很高的场合,几乎什么都能 ...

  4. 影响Arcmap运行效率的因素

    在使用ArcMap的过程中,总觉得ArcMap运行起来非常慢,目前发现了两点原因: 一.渲染太多图斑 比较常见的,我们在打开矢量图层时,Arcmap会自动渲染加载进去的图斑,进行符号化.在渲染的过程中 ...

  5. hightcharts详细教程

    1.初始化highcharts var chart = Highcharts.chart('container', options); 2.options 自定义图表的配置项 const option ...

  6. JVM垃圾收集器-Serial收集器

    今天我给大家分享的是Serial收集器,垃圾收集器就是内存回收的具体实现.Java虚拟机规范中对垃圾收集器应该如何实现并没有任何规定,因此不同的厂商,不同的版本的虚拟机所提供的垃圾收集器都可能会有很大 ...

  7. B/S与C/S的优缺点

     B/S:Browser/Server,即浏览器/服务器架构,一般用于网站: 优点:无需安装,不需要更新客户端: 缺点:交互性差,安全性低. C/S:Client/Server,即客户端/服务器端架构 ...

  8. windows下启动mysql服务

    当你无法连接你的mysql数据库时,或者因为某些原因导致与mysql数据库的连接丢失时,可通过以下方式启动mysql服务 1.命令行下启动mysql服务 以管理员身份运行cmd,进入mysql安装目录 ...

  9. 2018.5.11 B树总结

    小结 B树:二叉树,每个结点只存储一个关键字,等于则命中,小于走左结点,大于 走右结点: B-树:多路搜索树,每个结点存储M/2到M个关键字,非叶子结点存储指向关键 字范围的子结点: 所有关键字在整颗 ...

  10. spring-aop思想实践demo

    需求: 例如我们需要有一个类中每个方法执行前都需要做一个权限校验,必须是有特定权限的账号才能完成该方法的操作. 解决方案: 1.使用父类继承方式,书写该类的父类,然后在父类中定义一个checkPri的 ...