<!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. 在mysql中修改表名的sql语句

    在使用mysql时,经常遇到表名不符合规范或标准,但是表里已经有大量的数据了,如何保留数据,只更改表名呢?可以通过建一个相同的表结构的表,把原来的数据导入到新表中,但是这样视乎很麻烦.能否简单使用一个 ...

  2. POJ 3734

    题目的大意: 给定待粉刷的n个墙砖(排成一行),每一个墙砖能够粉刷的颜色种类为:红.蓝.绿.黄, 问粉刷完成后,红色墙砖和蓝色墙砖都是偶数的粉刷方式有多少种(结果对10007取余). 解题思路: 思路 ...

  3. PureMVC(JS版）源码解析（四）：Notifier类

         上一篇博客中,我们解析了Observer(观察者)类,这一篇博客我们来讲Notifier(通知着)类.关于Notifier类,源码注释上有这么一段: * @class puremvc.Not ...

  4. HDU2085JAVA

    核反应堆 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  5. Android（java）学习笔记172：BroadcastReceiver之 Android广播机制

    Android广播机制 android系统中有各式各样的广播,各种广播在Android系统中运行,当"系统/应用"程序运行时便会向Android注册各种广播.Android接收到广 ...

  6. linux下实现redis共享session的tomcat集群

    为了实现主域名与子域名的下不同的产品间一次登录,到处访问的效果,因此采用rediss实现tomcat的集群效果.基于redis能够异步讲缓存内容固化到磁盘上,从而当服务器意外重启后,仍然能够让sess ...

  7. datatables常见报错

    Uncaught TypeError: Cannot read property 'style' of undefined 分析:列表配置 columnDefs 列数不匹配 来自为知笔记(Wiz)

  8. 【原创教程】JavaScript详解之语法和对象

    JavaScript的好的想法:函数.弱类型.动态对象和一个富有表现力的对象字面量表示法. JavaScript的坏的想法:基于全局变量的编程模型.   好了,不管他是好的还是坏的,都是我的最爱,下面 ...

  9. SetConsoleCtrlHandler 处理控制台消息

    转载自csdn:http://blog.csdn.net/zhongguoren666/article/details/8770615   SetConsoleCtrlHandler 处理控制台消息 ...

  10. Cocos2d-x 学习资料收集

    框架源代码: http://code.google.com/p/cocos2d-x/downloads/list 搭建环境 http://blog.csdn.net/ccf19881030/artic ...