<!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. GXT之旅：第三章：表单和窗口(4)——表单的提交和RPC

    表单使用HTTP提交 表单有两种提交方式,第一种就是传统的HTTP提交. 最直接的步骤就是: 使用FormPanel的setAction()方法,去定义submit的URL 使用FormPanel的i ...

  2. WPF passwordbox 圆角制作

    将以下节点复制到app.xaml的<Application.Resources>节点下 <Style TargetType="PasswordBox">   ...

  3. POJ 1182 （经典食物链 /并查集扩展）

    (參考他人资料) 向量偏移--由"食物链"引发的总结 http://poj.org/problem?id=1182这道食物链题目是并查集的变型.非常久曾经做的一次是水过的,这次 ...

  4. hadoop错误org.apache.hadoop.mapred.TaskAttemptListenerImpl Progress of TaskAttempt

    错误: org.apache.hadoop.mapred.TaskAttemptListenerImpl: Progress of TaskAttempt 原因: 错误很明显,磁盘空间不足,但郁闷的是 ...

  5. Servlet配置文件

    <url-pattern>/servlet/demo</url-pattern> 1.以 / 开头, /代表工程路径:(必须要加 / ) 2.以 * 开头,必须加后缀名 /* ...

  6. 安装Oracle数据库和PLSQL连接数据库

    首先在Oracle官网上下载: 安装前要注意:将win64_11gR2_database_2of2中的\win64_11gR2_database_2of2\database\stage\Compone ...

  7. 插入ts以及判断列是否存在（支持多数据库）

    1:增加ts.dr字段,先判断ts.dr字段是否存在,其中ts字段插入的是日期,默认值为当前插入的时间,dr字段是数值型,默认值为0 * 增加ts/dr字段 * * @param tableList ...

  8. Linux下搭建Oracle11g RAC(6)----安装Grid Infrastructure

    从此步骤开始,我们正式安装Grid软件: ① 以grid用户登录图形界面,执行/home/grid/grid/runInstaller,进入OUI的图形安装界面: ② 进入OUI安装界面后,选择第3项 ...

  9. Pagekit安装

    Pagekit 是一个模块化,轻量的 CMS 系统,基于现代化的技术,如 Symfony 组件和 Doctrine.它提供了一个很好的平台,用于主题和延伸开发.Pagekit 为您提供了工具来创造美丽 ...

  10. Java代码操作HDFS(在/user/root/下面創建目錄)

    1.创建HDFS目录并打成jar包 package Hdfs; import java.io.IOException; import java.net.URI; import org.apache.h ...