@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

动画的名称和运行所需时间是必须的

帧动画：将动画名称赋给选择器后动画运行完就会返回初始值，所以需要通过给选择器添加类保证动画的正常运行

下图是一个简洁的无缝滚动（css3）

划过停止运动：animation-play-state:paused

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="../css/public.css"/>

        <style type="text/css">

            .wrap{width: 500px;height:100px;overflow:hidden;margin: 100px auto;position: relative;border: 10px solid #999;}

            .list{position: absolute;left:0;top:0;width: 1000px;height: 300px;}

            .list:hover{-webkit-animation-play-state: paused;-moz-animation-play-state: paused;-ms-animation-play-state: paused;animation-play-state: paused;}

            .list li{float:left;width: 98px;height: 98px;border: 1px solid #000;text-align: center;line-height: 98px;}

            @-webkit-keyframes move{

                0%{

                    left: 0;

                }

                100%{

                    left: -500px;

                }

            }

            @-moz-keyframes move{

                0%{

                    left: 0;

                }

                100%{

                    left: -500px;

                }

            }

            @-ms-keyframes move{

                0%{

                    left: 0;

                }

                100%{

                    left: -500px;

                }

            }

            @keyframes move{

                0%{

                    left: 0;

                }

                100%{

                    left: -500px;

                }

            }

            .scroll{-webkit-animation: 3s move infinite;-moz-animation: 3s move infinite;-ms-animation: 3s move infinite;animation: 3s move infinite;left: -500px;}

        </style>

        <script type="text/javascript">

            window.onload=function(){

                var oUl=document.getElementById("list");

                oUl.className='list scroll';

            }

        </script>

    </head>

    <body>

        <div class="wrap">

            <ul class="list" id="list">

                <li>1</li>

                <li>2</li>

                <li>3</li>

                <li>4</li>

                <li>5</li>

                <li>1</li>

                <li>2</li>

                <li>3</li>

                <li>4</li>

                <li>5</li>

            </ul>

        </div>

    </body>

</html>

css3-无缝滚动的更多相关文章

  1. 纯css3无缝滚动

    纯css3无缝向左滚动: HTML: <div class="marqueCon"> <div class="marque"> < ...

  2. 用CSS3实现无限循环的无缝滚动

    有时候在页面的某个模块中,需要无限循环的滚动一些消息.那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)? 克隆A一份完全一样的数据B放在原数据A的后面: 使用setIn ...

  3. CSS3动画之无缝滚动

    与js的无缝滚动类似,整个承载图片的盒子移动,克隆一组图片放置最后,当一组图片播放结束后将盒子定位在有一组图片宽度的左侧 HTML结构: <div class="box"&g ...

  4. vue实现消息的无缝滚动效果

    export default { data() { return { animate:false, items:[ {name:"马云"}, {name:"雷军" ...

  5. Vue 消息无缝滚动

    vue实现消息向上无缝滚动效果 <ul class="new-list" :class="{anim:animate}" @mouseenter=&quo ...

  6. vue实现无缝滚动

    vue实现无缝滚动 标签部分 <div style="height: 260px; width: 50%;display: inline-block;float: right; ove ...

  7. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  8. JQuery的无缝滚动

    图片无缝向左滚动的代码如下:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  9. JS 阶段小练习~ 无缝滚动

    结合下学了的知识,做个模拟的综合性扩展练习~~  大致功能如下: 1.点开html后,图片自动移动展示 2.点击左右方向,可以改变 图片移动的方向(改变left的值,正负) 3.鼠标移入移出图片后,图 ...

  10. 自己写了一个无缝滚动的插件(jQuery)

    效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...

随机推荐

  1. 周末惊魂：因struts2 016 017 019漏洞被入侵，修复。

    入侵(暴风雨前的宁静) 下午阳光甚好,想趁着安静的周末静下心来写写代码.刚过一个小时,3点左右,客服MM找我,告知客户都在说平台登录不了(我们有专门的客户qq群).看了下数据库连接数,正常.登录阿里云 ...

  2. golang os.OpenFile

    os.O_WRONLY | os.O_CREATE | O_EXCL           [如果已经存在,则失败] os.O_WRONLY | os.O_CREATE                 ...

  3. java分解质因数

      package test; import java.util.Scanner; public class Test19 { /** * 分析:对n进行分解质因数,应先找到一个最小的质数k * 最小 ...

  4. 设计模式03备忘录(java)

    先贴代码有空来写内容. 备忘录1 //简单的备忘录,只可以记录上一次修改前的状态,实现撤回一次的操作. class Student{ private String name; private Stri ...

  5. C# Session添加、删除封装类

    /// <summary> /// <para> </para> /// 常用工具类——Session操作类 /// <para> ---------- ...

  6. SalesForce 记录级别安全性

    对象级安全性 简档 对象级安全性提供了控制 Salesforce.com 中数据的最简单方式.使用对象级安全性 您可以防止用户查看.创 建.编辑或删除特殊类型对象的任何实例 如潜在客户或业务机会.对象 ...

  7. Highchart插件简介和引入方式

    一.Highchart简介: Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表. Highchart ...

  8. [Erlang 0128] Term sharing in Erlang/OTP 下篇

    继续昨天的话题,昨天提到io:format对数据共享的间接影响,如果是下面两种情况恐怕更容易成为"坑", 呃,恰好我都遇到过; 如果是测试代码是下面这样,得到的结果会是怎样?猜! ...

  9. iOS系列 基础篇 02 StoryBoard 故事板文件

    iOS基础 02 StoryBoard 故事板文件 目录: 1. 故事板的导航特点 2. 故事板中的Scene和Segue 3. 本文最后 在上篇HelloWorld工程中有一个Main.storyb ...

  10. 常用ASCII CHR碼對照

    因為開發需求,把對照表留下來一下. Chr(0) Null Chr(29) 分组符 Chr(38) & Chr(48) 0 Chr(8) 退格 Chr(30) 記錄分離符號 Chr(39) ‘ ...