<!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. Debian系统 + XFCE桌面初识，基础环境搭建

    有幸分享个人的Linux下的习惯配置,具体操作可能阐述得比较粗糙. 在图形化界面进行配置操作,十分简便舒心. Linux发行版:Debian9.5(Stretch) 桌面Sesion:XFCE4 一. ...

  2. C#经典面试题及答案

    1.请你说说.net 中类和结构的区别? 答:结构和类具有大体的语法,但是结构受到的限制比类多.结构不能声明默认的的构造函数,为结构的副本是编译器创建和销毁的,所以不需要默认的构造函数和析构函数,结构 ...

  3. Debug程序的使用

    一.什么是Debug程序: Debug是DOS, Windows(但是Win7 64位没有,8 10不清楚.)都提供的实模式程序的调试工具, 使用它,可以查看CPU各种寄存器中的内容,内存的情况和在机 ...

  4. 在java中，异常抛出点后程序的执行情况

    1.在throw语句,即自定义的抛出异常语句后面的代码并不会执行,会提示错误,编译器并不可以正常编译. 2.若在一个条件语句中抛出一个异常,程序可以编译,但不会运行(dead code). 3.若在一 ...

  5. c# excel xls保存

    public HSSFWorkbook Excel_Export(DataTable query,string title,int[] rowweight,string[] rowtitle) { H ...

  6. 关于python的创立模块和导入

    首先,模块就是所有的.py文件,而模块的作用便是简化代码,使其看得简易. 例如这就是模块: 'a test'这是注释,并没有什么作用. 而创立模块的第一步:建立一个.py文件例如:这是上方这串代码的模 ...

  7. linux下用ctrl+r快速搜索history命令

    前提是,搜索已经使用的命令,否则是查不出来结果的. ctrl+r用途:反向搜索执行过的命令.(reverse-i-search) 1.任何目录下按住ctrl + r 2.输入历史命令中的字符串 ,比如 ...

  8. Educational Codeforces Round 54 (Rated for Div. 2) D:Edge Deletion

    题目链接:http://codeforces.com/contest/1076/problem/D 题意:给一个n个点,m条边的无向图.要求保留最多k条边,使得其他点到1点的最短路剩余最多. 思路:当 ...

  9. JavaScript第一阶段学习心得

    开始接触JavaScript是从慕课网开始的,基础篇学完.懵了一逼,可能是自己太蠢.感觉跟没学差不多,属性,方法,对象,什么都不懂.有的方法知道起的是什么效果,但是原理什么的都不知道. 还好,基础篇学 ...

  10. MySQL 表字段操作

    MySQL 表字段操作 一.增加表字段 1)mysql> alter table 二.删除表字段 三.修改表字段