<!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. C#使用Sockets操作FTP【转载】

    using System; using System.Collections; using System.IO; using System.Net; using System.Net.Sockets; ...

  2. 深入了解Angularjs指令中的ngModel

    关于AngularJs的指令的知识学习,请参考... 这次我们接上次没讲完的知识继续. 前端人员在设计表单逻辑时, 在大部分情况下,我们需要为表单定义很多指令, 比如比较两个input内的值是否相同, ...

  3. JavaBean中DAO设计模式介绍(转)

    一.信息系统的开发架构 客户层-------显示层-------业务层---------数据层---------数据库 1.客户层:客户层就是客户端,简单的来说就是浏览器. 2.显示层:JSP/Ser ...

  4. android Fragments详解六:处理fragement的生命周期

    把条目添加到动作栏 你的fragment们可以向activity的菜单(按Manu键时出现的东西)添加项,同时也可向动作栏(界面中顶部的那个区域)添加条目,这都需通过实现方法onCreateOptio ...

  5. 编写跨平台代码之memory alignment

    编写网络包(存储在堆上)转换程序时,在hp-ux机器上运行时会遇到 si_code: 1 - BUS_ADRALN - Invalid address alignment. Please refer ...

  6. C# DataTable怎么合计字段

    DataTable dt = new DataTable(); var age=dt.Compute("avg(age)",""); var height =d ...

  7. 30种mysql优化sql语句查询的方法<转>

    转自百度文库 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引.   2.应尽量避免在 where 子句中使用!=或<>操作符,否 ...

  8. “System.Transactions.Diagnostics.DiagnosticTrace”的类型初始值设定项引发异常。

    今天在项目中用log4net,App.config文件中增加了configSections节点,程序运行报错“System.Transactions.Diagnostics.DiagnosticTra ...

  9. A题笔记（2）

    No. 1505 文件读相关 #include <fstream> #include <sstream> <fstream>支持文件的IO <sstream& ...

  10. Maven3（笔记二）

    笔记本二   在Eclipse 中使用Maven 第一节:m2eclipse 插件安装 打开Eclipse,点击菜单Help - > Install New Software 点击Add 按钮N ...