<!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. 【转载】aspx,ascx和ashx使用小结

    做asp.net开发的对.aspx,.ascx和.ashx都不会陌生.关于它们,网上有很多文章介绍."纸上得来终觉浅,绝知此事要躬行",下面自己总结一下做个笔记.1..aspxWe ...

  2. Html简单的整页切换

    恩,语言组织不是很好,直接上代码吧.... <!DOCTYPE html> <html> <head lang="en"> <meta c ...

  3. 小练习：用socket实现Linux和Windows之间的通信

    在日常生活中,绝大部分人使用的机器通常是windows系统,可是对于研发人员,开发.编译等工作往往是建立在linux机器上.其实.在服务器方面,Linux.UNIX和WindowsServer占领了市 ...

  4. 在linux系统中I/O 调度的选择 （转）

    I/O 调度算法再各个进程竞争磁盘I/O的时候担当了裁判的角色.他要求请求的次序和时机做最优化的处理,以求得尽可能最好的整体I/O性能. 在linux下面列出4种调度算法 CFQ (Completel ...

  5. 最新番茄花园win7系统快速稳定版

    这是最新番茄花园win7系统64位快速稳定版 V2016年2月,该系统由系统妈整理和上传,系统具有更安全.更稳定.更人性化等特点.集成最常用的装机软件,集成最全面的硬件驱动,精心挑选的系统维护工具,加 ...

  6. 整合Settings.bundle显示版本信息

    本文转载至 http://www.cocoachina.com/ios/20141103/10112.html iOS开发XCode版本管理Debug开发Tips   现在你有一个App,你同事的iP ...

  7. python 基础 3.2 文件 for 练习

    #/usr/bin/python #coding=utf-8 #@Time   :2017/11/1 22:19 #@Auther :liuzhenchuan #@File   :1030-1031练 ...

  8. SAM4E单片机之旅——13、LCD之ASF初步

    在Atmel Studio 6中,集成了Atmel Software Framework(ASF框架).通过它提供的库,可以很快速地完成新的项目. 这次的最终目标使用ASF在LCD上显示出文字“Hel ...

  9. EasyNVR实现海康、大华NVR硬盘录像机Web无插件播放方案（支持取特定时间段视频流）

    本文转自:https://blog.csdn.net/black_3717/article/details/79872725 背景说明: 由于视频自身的直观性和便利性,对于传统安防行业,摄像机的直播和 ...

  10. git拉取远程分支到本地分支或者创建本地新分支

    git fetch origin branchname:branchname 可以把远程某各分支拉去到本地的branchname下,如果没有branchname,则会在本地新建branchname g ...