<!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. 调用android系统相机拍照并保存

    [java] view plaincopyprint? <span style="font-size:18px;">package com.demo; import j ...

  2. 封装CLLocationManager定位获取经纬度

    创建调用方法,在.h文件里 #import <Foundation/Foundation.h> @interface RMMapLocation : NSObject { void (^s ...

  3. S:33184777

    https://github.com/wjlWork/Crawl/tree/da0b63bc43bd7c238963f834a11df2581cecfb9c https://github.com/wh ...

  4. TRUNCATE 不能引发触发器

    我在使用phpmyadmin清空时发现这个问题

  5. 地上有一个m行和n列的方格。一个机器人从坐标0,0的格子开始移动，每一次只能向左，右，上，下四个方向移动一格，但是不能进入行坐标和列坐标的数位之和大于k的格子。 例如，当k为18时，机器人能够进入方格（35,37），因为3+5+3+7 = 18。但是，它不能进入方格（35,38），因为3+5+3+8 = 19。请问该机器人能够达到多少个格子？

    // test20.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...

  6. HDFS源码分析心跳汇报之BPServiceActor工作线程运行流程

    在<HDFS源码分析心跳汇报之数据结构初始化>一文中,我们了解到HDFS心跳相关的BlockPoolManager.BPOfferService.BPServiceActor三者之间的关系 ...

  7. 利用树的先序和后序遍历打印 os 中的目录树

    [0]README 0.1)本代码均为原创,旨在将树的遍历应用一下下以加深印象而已:(回答了学习树的遍历到底有什么用的问题?)你对比下linux 中的文件树 和我的打印结果就明理了: 0.2)我们采用 ...

  8. ios - UISearchBar输入框背景色

    //输入框背景色 bar.searchBarStyle = UISearchBarStyleMinimal; [bar positionAdjustmentForSearchBarIcon:UISea ...

  9. CGI的基本原理

    一．基本原理 CGI:通用网关接口(Common Gateway Interface)是一个Webserver主机提供信息服务的标准接口.通过CGI接口,Webserver就行获取client提交的信 ...

  10. PHP部分--图片上传服务器、图片路径存入数据库，并读取

    html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...