@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. jquery遍历table获取td单元格的值

    $("#grd").find("tr").each(function () { //第二列单元格的值eq(索引) alert($(this).children( ...

  2. winForm连接数据库（sqlserver2005）

    帮同学搞个课程设计winform连接sqlserver2005 具体方法: .添加App.config文件 2.在App.config文件中添加节点 <?xml version="1. ...

  3. EC笔记：第4部分：18、接口正确使用，不易被误用

    好的接口容易被正确使用,不易被误用 考虑以下函数: void func(int year,int month,int day){ //一些操作 } 这个函数看似合理,因为参数的名字已经暴露了它的用途. ...

  4. Linux下安装Redis

    1. 下载最新版本的Redis源代码: 命令:wget http://download.redis.io/redis-stable.tar.gz 2. 解压并编译 命令:tar xzf redis-s ...

  5. 微信小程序demo理解

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Verdana } p.p2 { margin: 0.0px 0.0px 0.0px 0.0p ...

  6. java 开发模式

    Java-开发模式 Java Web开发方案有多种,这里列举一些经典的开发模式进行横向比较JSP+JAVABEAN开发模式:    特点:该模式将业务逻辑与页面表现进行分离,在一定程度上增加了程序的可 ...

  7. 使用Mavne生成可以执行的jar文件

    到目前为之,还没有运行HelloWorld的项目,不要忘了HelloWorld类可是有一个main方法的.使用mvn clean install命令默认生成的jar 包是不能直接运行的.因为带有mai ...

  8. linux安装中文语言包

    相关配置如下: yum install fonts-chinese.noarch yum install m17n-db-common-cjk yum install m17n-db-chinese安 ...

  9. 使用ViewPager切换Fragment时，防止频繁调用OnCreatView

    使用ViewPager切换Fragment,我原先使用系统自带的适配器FragmentPagerAdapter. 切换fragment时,频繁调用oncreatview(). 查看FragmentPa ...

  10. 获取View的截图-将View转换为Bitmap对象

    开发中,有时候需要获取View的截图来做动画来达到动画流程的目的 原理:将View的内容画到一个Bitmap画布上,然后取出 下面封装了一个从View生成Bitmap的工具类 /** * 将View转 ...