@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. 运行第一个PHP程序

    由于PHP比较简单,所以闲来无事学习一下PHP的程序. 之前安装XAMPP出现各种错误,于是下载了PHPStudy,真的十分简单方便,感谢网站开发者. 可以在网站的软件下载中下载,附上首页链接:htt ...

  2. Java多线程整理（li）

    目录: 1.volatile变量 2.Java并发编程学习 3.CountDownLatch用法 4.CyclicBarrier使用 5.BlockingQueue使用 6.任务执行器Executor ...

  3. hdu-2444-二分图判定+最大分配

    The Accomodation of Students Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ( ...

  4. 如何围绕企业战略，建设BI驾驶舱？

    随着企业的逐步发展,人员的增加.业态的复杂不仅对管理也对信息化的要求越来越高,甚至需要从战略角度出发,进行从上至下的全面推行. 关于这个话题,某公司深有体会.面对这样的瓶颈,一方面从优化信息架构.调整 ...

  5. Android MVP模式 谷歌官方代码解读

    Google官方MVP Sample代码解读 关于Android程序的构架, 当前(2016.10)最流行的模式即为MVP模式, Google官方提供了Sample代码来展示这种模式的用法. Repo ...

  6. Android应用项目中BaseAdapter、SimpleAdapter和ArrayAdapter中的三种适配器

    一.写在前面: 本次我们来讲解一下Android应用中三个适配器:BaseAdapter.SimpleAdapter和ArrayAdapter.其中常见的是BaseAdapter,也是个人推荐使用的适 ...

  7. Eclipse for Java EE软件操作集锦（一）

    以下是我在Java网站开发过程中,关于软件操作Eclipse中,遇到的一些问题并提供了解决方案.一.java web开发使用的集成开发工具是eclipse for Java EE 官方下载地址:htt ...

  8. ASP.NET MVC 5 01 - ASP.NET概述

    本篇目录: ASP.NET 概述 .NET Framework 与 ASP.NET ASP.NET MVC简介 ASP.NET的特色和优势 典型案例 ▁▃▅ ASP.NET概述 ▅▃▁ 目前开发B/S ...

  9. 关于Android中new Notification

    目前 Android 已经不推荐使用下列方式创建 Notification实例: Notification notification = new Notification(R.drawable.ic_ ...

  10. 基于IIS构建Pyathon Web服务

    本文简单叙述了在Windows下,如何利用IIS构建Python Web服务. 其主要步骤如下: 1.在IIS下构建一个站点,如图: 2.配置Python文件的处理程序,如图: 3.最后,在对应站点根 ...