<!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. jquerymobile知识点：动态ListView

    这里要讲的是jqueryMobile 中的ListView 动态的列表 <ul data-role="listview" data-inset="true" ...

  2. [转]flume-ng+Kafka+Storm+HDFS 实时系统搭建

    http://blog.csdn.net/weijonathan/article/details/18301321 一直以来都想接触Storm实时计算这块的东西,最近在群里看到上海一哥们罗宝写的Flu ...

  3. 史上比较用心的纯代码实现 AutoLayout

    入职有两三个月了吧,都是使用 Objective-C 纯代码(虽然有时候偷偷参杂一些 Swift 开源库)来编写公司APP,写布局的时候几乎都是要么在初始化的时候用 initWithFrame,要么就 ...

  4. 字符串匹配算法-BM

    在用于查找子字符串的算法中,BM(Boyer-Moore)算法是当前有效且应用比较广泛的一种算法,各种文本编辑器的“查找”功能(Ctrl+F),大多采用Boyer-Moore算法.比我们学习的KMP算 ...

  5. rpm安装mysql 默认安装目录

    MySQL安装完成后不象SQL Server默认安装在一个目录,它的数据库文件.配置文件和命令文件分别在不同的目录,了解这些目录非常重要,尤其对于Linux的初学者,因为Linux本身的目录结构就比较 ...

  6. android UI生成器

    可根据选择的效果生成资源 http://jgilfelt.github.io/android-actionbarstylegenerator/#name=example&compat=sher ...

  7. ASP.Net免费发送短信-阿里大鱼短信接口

    有点短信余额 不用白不用 3月1号就过期了 情人节做了个免费发短信的 http://love.issuc.com/ 固定短信模板 [活动验证]您正在参加XXX的OOO活动,请确认系本人申请.需要的可以 ...

  8. js 配置基础启动文件

    页面启动文件boot.js,获取存放该文件的路径,放置通用的css,js代码,方便html页面调用. __CreateJSPath = function (js) { var scripts = do ...

  9. JAVAAPI学习之Calendar类；Calendar类set()、add()、roll()方法区别

    JAVAAPI学习之Calendar类 http://blog.csdn.net/myjlvzlp/article/details/8065775(写的很好,清晰易懂) Calendar类set(). ...

  10. spring配置文件中属性mappingLocations、mappingDirectoryLocations

    http://blog.csdn.net/vacblog/article/details/7774173