<!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 @keyframes move

 {

     0%

     {

         transform:translateX(0px);

     }

     100%

     {

         transform:translateX(-500px);

     }

 }

 ul{margin:0;padding:0; list-style:none;}

 .picTab{width:500px;height:100px;border:2px solid #000; margin:50px auto; 

 overflow:hidden;}

 .picTab ul{width:1000px;height:100px; animation:move 5s linear infinite;}

 .picTab li

 {margin:1px;float:left;width:98px;height:98px;background:#000;color:#fff; 

 font:50px/98px "宋体"; text-align:center;}

 .picTab:hover ul{ animation-play-state:paused;}

 </style>

 </head>

 <body>

 <section class="picTab">

     <ul>

         <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>

 </section>

 </body>

 </html>

效果图：

css3实现无缝滚动效果的更多相关文章

  1. liMarquee演示12种不同的无缝滚动效果

    很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...

  2. js实现简单易用的上下无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 信息无缝滚动效果marquee

    横向滚动.纵向滚动 1. 解决滚动的空白 向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动 上下滚动实现无缝滚动1. innerHTML ...

  4. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  5. javascript小例子：實現四方向文本无缝滚动效果

    实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...

  6. vue实现消息的无缝滚动效果

    export default { data() { return { animate:false, items:[ {name:"马云"}, {name:"雷军" ...

  7. jq封装-无缝滚动效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. js 无缝滚动效果学习

    <!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...

  9. jQery无缝滚动效果

    思路: 赋值所有li,添加到ul末尾,重新计算ul宽度 每次移动一个固定的值,当超出一半时,将ul拉回原位 以下代码 <!DOCTYPE html> <html> <he ...

随机推荐

  1. LabSharp莱博夏普简介

    莱博夏普提供实验室信息化解决方案,为实验室提供LIMS系统建设方案咨询,并为中小型LIMS系统供应商提供系统解决方案咨询.

  2. JSON和JAVA的POJO的相互转换【转载】

    该类中用用到的jar包:参加文章<使用json-lib进行Java和JSON之间的转换[转载]> import java.util.Collection; import java.util ...

  3. SQL高级优化之经常使用的优化策略-2（The Return Of The King）

    1.2 索引 索引不是越多越好,你须要知道索引建立多了.写入数据的效率会减少.怎样使用索引要看你的项目的应用场景,做出合理的測试评估. 1.2.1 统计数量 统计数量上.假设字段(fieldName) ...

  4. [MySQL 5.6] 初识5.6的optimizer trace

      在MySQL5.6中,支持将执行的SQL的查询计划树记录下来,目前来看,即使对于非常简单的查询,也会打印出冗长的查询计划,看起来似乎不是很可读,不过对于一个经验丰富,对查询计划的生成过程比较了解的 ...

  5. Linux性能及调优指南（翻译）

    http://blog.csdn.net/ljianhui/article/details/46718835 http://blog.chinaunix.net/uid-26000296-id-406 ...

  6. LPC2378-Jlink 能下载程序，但是调试出现各种奇怪问题

    LPC2378-Jlink调试经验 1.Jlink(d版的没有关系)不能下载程序?     把下载速率设置到500Khz及以下的速率. 2.Jlink能在500Khz的速率下载程序,但是不能调试?添加 ...

  7. 浅析@Deprecated

    如果有一个方法你觉得不合适,想要删除,但是别人已经引用了很多次,删除了会对他人的工作产生影响,那该怎么办? 加入@Deprecated注解即可,看代码: @Test public void test1 ...

  8. sql查询最大id

    如 有个表里有字段 id,name,..... 当name是重复时取其id最大的一条记录 select max(id) id,name from 表 group by name --最小用mini - ...

  9. Razor的理解

    [原创]Razor非常智能非常实用,不了解的人可能会觉得有没有都无所谓,其实不然,起初对Razor不是太了解,现在想想Razor就是来标示出C#语法的,但是HTML和C#混合输出时到底@这个小老鼠到底 ...

  10. css：nth-of-type()选择器用法

    今天做一个页面,无意中看到这个nth-of-type感觉挺方便的,之前单双行有的有横线,有的无横线一般在html中单独再写border-right:none等之类的.现在发现这个好东西赶紧记录下来. ...