<!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. 38: 立方根getCubeRoot

    题目描述:计算一个数字的立方根,不使用库函数 •接口说明 原型:public static double getCubeRoot(double input) 输入:double 待求解参数 返回值:d ...

  2. 优秀JS学习站点

    第一个:电子书类集合站点:http://www.javascriptcn.com/thread-2.html 第二类:移动端博客学习: https://segmentfault.com/a/11900 ...

  3. HTML5 2D平台游戏开发#3冲刺

    断断续续地把Demo又写了一阵,终于把角色的冲刺动作完成了.冲刺的作用是使角色能够快速移动,闪避攻击或障碍.其完成效果如下: 首先,仍需要一些变量来表示角色的冲刺状态: //标识角色是否处于冲刺中 v ...

  4. MongoDB--安装部署

    MongoDB安装 说明: 本次安装教程: 版本:mongoDB-3.2.4 安装环境:windows 10 ,64位操作系统 准备:安装包.Robomongo(客户端用于查看mongoDB里面的数据 ...

  5. 【C语言】一句printf代码——{ a[0] ? 0[a] }

    这是前段时间做的http://fun.coolshell.cn/中的一道题,很有意思,涉及的其实是C的基础,不过当时第一次看见这行代码确实把我弄懵了: printf(&unix["\ ...

  6. MongoDB安装配置(Windows)

    官网下载:https://www.mongodb.com/ 百度经验:https://jingyan.baidu.com/article/d5c4b52bef7268da560dc5f8.html 官 ...

  7. vscode webstrom 配置 eslint 使用 airbnb 规范

    1.安装eslint npm eslint-plugin-react eslint-plugin-import babel-eslint -g 2.全局配置文件,放到c:/user/***/ { &q ...

  8. EasyNVR NVR网页无插件直播在兼容宇视NVR RTSP流媒体时PLAY过程对Scale的兼容

    前一段在维护EasyNVR客户的过程中遇到一个问题,在接入宇视NVR的时候,就是明明在vlc中能非常正常播放的视频流,却用EasyRTSPClient RTSP客户端拉流的协议交互过程中,PLAY命令 ...

  9. 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui

    接上篇 接上篇<高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间> 本文围绕着实现EasyDSS高性能流 ...

  10. android菜鸟学习笔记6----android布局(一)

    Android应用的UI组件都是继承自View类,View类表示的就是一个空白的矩形区域.常用的组件如TextView.Button.EditText等都直接或间接继承自View. 此外,View还有 ...