<!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, ...