<!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. win7 iis6怎么部署.net网站

    win7 iis6怎么部署.net网站,把本机当成网站服务器来简单介绍. 方法/步骤 1 首先在本机有一个可以正常运行的网站.比如vs2010中有一个网站项目,网站项目运行后正常. 2 打开iis6, ...

  2. java GC(Garbage Collector) | System.gc()

    http://win.sy.blog.163.com/blog/static/94197186201151093543556/     Java垃圾回收调优

  3. Oracle 唯一 索引 约束 创建 删除

    http://www.blogjava.net/lukangping/articles/340683.html/*给创建bitmap index分配的内存空间参数,以加速建索引*/ show para ...

  4. leetCode 83.Remove Duplicates from Sorted List(删除排序链表的反复) 解题思路和方法

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

  5. 33:字符统计SumOfCharactors

    题目描述:如果统计的个数相同,则按照ASII码由小到大排序输出 .如果有其他字符,则对这些字符不用进行统计. 实现以下接口: 输入一个字符串,对字符中的各个英文字符,数字,空格进行统计(可反复调用) ...

  6. Angular+Angular-Ui实现分页(代码更加简单,更加容易懂哦)

    前面写了个分页,但是个人认为只能玩玩,实际业务上的话代码太繁杂(笔者想走代码.性能精简化之路[不知道哪天才能成为高手~·YY一下无伤大雅]),逻辑上有点混乱.那么今天我们来看看另外一种只实现分页没有查 ...

  7. dede频道标签channel和频道内容标签channelartlist的调用栏目名的不同方式,如果错误使用标签会发生错误

    频道标签 [field:typename/] 频道内容标签 {dede:field name='typename'/}

  8. Zabbix-20160817-高危SQL注入漏洞

    漏洞概述: zabbix是一个开源的企业级性能监控解决方案.近日,zabbix的jsrpc的profileIdx2参数存在insert方式的SQL注入漏洞,攻击者无需授权登陆即可登陆zabbix管理系 ...

  9. Github的基本功能:

    作者:Fadeoc Khaos链接:http://www.zhihu.com/question/20070065/answer/30521531来源:知乎著作权归作者所有,转载请联系作者获得授权. G ...

  10. win7激活附带激活软件

    链接: https://pan.baidu.com/s/1i46yoHR 密码: 7k6y