<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    *{

        margin: 0;

        padding: 0;

    }

    .wrap{

        width: 500px;

        height: 100px;

        box-shadow: 0 0 120px #333;

        overflow: hidden;

        margin: 50px auto;

        cursor: pointer;

        position: relative;

    }

    .list{

        width: 200%;

        height: 100px;

        position: absolute;

        top: 0;

        left: 0;

        overflow: hidden;

    }

    .list li{

        list-style-type: none;

        float: left;

        margin: 10px;

        width: 74px;

        height: 74px;

        line-height: 74px;

        color: #414141;

        text-align: center;

        font-size: 52px;

        text-shadow: 1px 1px 0px rgba(255,255,255,.55);

        border: 1px solid #333;

        padding: 2px;

        background-color: orange;

    }

    @-webkit-keyframes move{

        from{

            left: 0;    /*这里使用translate移动时，hover暂停时会有回弹，原因不详*/

            /*-webkit-transform:translate3d(0,0,0);*/

        }

        to{

            left: -500px;

            /*-webkit-transform:translate3d(-500px,0,0);*/

        }

    }

    .animate{

        -webkit-animation:move 5s linear infinite;

    }

    .wrap:hover .animate{

        -webkit-animation-play-state: paused;

    }

    </style>

</head>

<body>

    <div class="wrap">

        <ul class="list animate">

            <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>

CSS实现简单无缝滚动的更多相关文章

  1. css 图片的无缝滚动

    转载:http://blog.sina.com.cn/s/blog_6387e82401013kx8.html js的图片的横向或者竖向的无缝滚动图片. ttp://zx.bjmylike.com/ ...

  2. Jquery+css实现图片无缝滚动轮播

    Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...

  3. 利用CSS实现带相同间隔地无缝滚动动画

    说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...

  4. js实现简单易用的上下无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. JavaScript学习笔记——简单无缝循环滚动展示图片的实现

    今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...

  6. CSS和jQuery分别实现图片无缝滚动效果

    一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  7. JavaScript（六）——实现图片上下或者左右无缝滚动

    /*! jQuery v1.8.3 jquery.com | jquery.org/license */ (function(e,t){function _(e){var t=M[e]={};retu ...

  8. JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

  9. js图片无缝滚动代码

    想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...

随机推荐

  1. 世纪怎么换算成具体的年份？eg：19世纪60年代=19？？年？

    http://zhidao.baidu.com/question/339742625.html&__bd_tkn__=6ab5183c226b84031b08b849ecac35b396039 ...

  2. Oracle创建自增字段和修改方法-ORACLE SEQUENCE的简单介绍

    http://blog.csdn.net/zhoufoxcn/article/details/1762351先假设有这么一个表: create table S_Depart  (    DepartI ...

  3. Oracle 11g新增not null的字段比10g快--新特性

    在11g之前添加一个not null的字段很慢.在11g之后就很快了.我们先做一个測试,然后探究下原理. SQL> select * from v$version; BANNER ------- ...

  4. js中insertAdjacentHTML的玩法

    原型:insertAdajcentHTML(swhere,stext) insertAdjacentHTML方法:在指定的地方插入html标签语句 参数:swhere: 指定插入html标签语句的地方 ...

  5. Ubuntu/CentOS下编译Nginx最基本参数

    Ubuntu/CentOS下编译Nginx安装基本参数,做个记录: groupadd www useradd -g www www ./configure --user=www --group=www ...

  6. ASP.NET动态网站制作（12）-- JQ（4）

    前言:这节课接着上次课的继续讲. 内容:接上--> 1.jq元素样式设置:  (4)某个元素中是否含有某个css类别,返回布尔型:$("li:last").hasClass( ...

  7. 空间Rm的任意两个范数都互相等价

  8. quick-cocos2d-x 系列之——环境搭建(Mac版)

    quick-cocos2d-x简单介绍 何为quick-cocos2d-x? ?   简单一句话:quick-cocos2d-x是採用lua语言,通过tolua++工具对cocos2d-x进一步封装, ...

  9. SAP增强 和VA01相关增强点介绍

    -转 sap寻找用户出口方法 sap的用户出口总共有三代: 一.User EXIT 第一代的用户出口,它们include在SAP标准程序的源代码里,可以说他们是源代码的一部分,你改了这种出口就相当于改 ...

  10. Java for LeetCode 102 Binary Tree Level Order Traversal

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...