如题。

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无缝衔接</title>

<style>

@-webkit-keyframes move

{

    0%{

        left:0;

    }

    100%

    {

        left:-500px;

    }

}

#wrap{

    width:500px;

    height:100px;

    border:1px solid #000;

    position:relative;

    margin:100px auto;

    overflow:hidden;

}

#list{

    position:absolute;

    left:0;

    top:0;

    margin:0;

    padding:0;

    -webkit-animation:3s move infinite linear;

    width:200%;

}

#list li{

    list-style:none;

    width:98px;

    height:98px;

    border:1px solid #fff;

    background:#000;

    color:#fff;

    font:50px/98px Arial;

    text-align:center;

    float:left;

}

#wrap:hover #list{

    -webkit-animation-play-state:paused;

}

</style>

</head>

<body>

<div id="wrap">

    <ul id="list">

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

</div>

</body>

</html>

无缝衔接demo的更多相关文章

  1. DJI Terra+EasyEarth让数据获取与应用无缝衔接

    大数据时代对地理信息数据的获取与应用提出了更高的要求: ⏩低成本.全要素.高效获取 ⏩数据采集.处理到应用无缝衔接 DJI Terra大疆智图 DJI Terra大疆智图是一款提供自主航线规划.飞行航 ...

  2. ModelArts 与HiLens Kit联合开发丨行人社交距离风险提示Demo

    摘要:本Demo使用YOLOv3_Resnet18模型来检测的视频流中的行人,获取行人坐标(即图中蓝色方框),然后计算所有检测到的人之间的相互"距离". 前情提要 听到行人社交距离 ...

  3. Swift - 多层无缝循环滚动背景（SpriteKit游戏开发）

    在游戏开发中,比如跑酷游戏.我们需要实现背景的无限循环滚动,来营造运动的效果.除了单层的背景滚动,还有视差滚动. 视差滚动是指让多层背景以不同的速度移动,形成立体的效果,从而带来非常出色的视觉体验. ...

  4. 用CSS3实现无限循环的无缝滚动

    有时候在页面的某个模块中,需要无限循环的滚动一些消息.那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)? 克隆A一份完全一样的数据B放在原数据A的后面: 使用setIn ...

  5. 基于 IJKPlayer-concat 协议的视频无缝拼接技术实现

    一.前言 Hi,大家好,我是承香墨影! 开门见山,开篇名义.今天来聊聊如何将多段视频,拼接成一个完整而连续的视频,然后无缝进行播放. 这样的需求应该不算偏门吧? 最简单的就是一些视频 App,会将大段 ...

  6. 值得H5前端学习的60个JS插件(含DEMO演示)

    下面也可以说是H5前端学习的js插件大全.基本包含了大部分的前端最前沿的js插件和库. 布局 SuperEmbed.js- 是一个Javascript库,可检测出网页上的内嵌视频并使他们能够变成响应式 ...

  7. 《Note --- Unreal 4 --- PersonaHowToMovement》

    https://docs.unrealengine.com/latest/CHN/Gameplay/HowTo/CharacterMovement/index.html 这里的demo是按照一些per ...

  8. 最新版ssh hibernate spring struts2环境搭建

    最新版ssh hibernate spring struts2环境搭建 最新版spring Framework下载地址:spring4.0.0RELEASE环境搭建 http://repo.sprin ...

  9. ExtJS笔记 Tree

    The Tree Panel Component is one of the most versatile Components in Ext JS and is an excellent tool ...

随机推荐

  1. RT-thread内核之对象管理系统

    一.数据结构 1.对象控制块:在include/rtdef.h中定义 /** * Base structure of Kernel object */ struct rt_object { char ...

  2. Python re(正则表达式)模块

    python正则表达式 正则表达式是一个特殊的字符序列,它能帮助我们方便的检查一个字符串是否与某种模式匹配.Python自1.5版本起增加了re模块,它提供Perl风格的正则表达式模式.re模块使Py ...

  3. P1278 单词游戏

    题目描述 Io和Ao在玩一个单词游戏. 他们轮流说出一个仅包含元音字母的单词,并且后一个单词的第一个字母必须与前一个单词的最后一个字母一致. 游戏可以从任何一个单词开始. 任何单词禁止说两遍,游戏中只 ...

  4. JS作用域-面向对象

    1. 其它语言是以代码块作为作用域的.下面程序会报错(如C,C++中),因为局部变量name只在{   }代码块中生效.打印console.writeline(name)中的name时就会报错. pu ...

  5. 对于iOS性能优化的一点看法

    在我们通常的开发工作中,每次需求定下来的时候,开发时间都是很紧张的,于是我们就抓紧时间开发,完成需求.在匆忙开发的过程中,或多或少的会有一些性能问题存在,在开发任务完成以后,我们都要进行性能优化.现将 ...

  6. HDU5696：区间的价值——题解

    http://acm.hdu.edu.cn/showproblem.php?pid=5696 题面是中文的我就不粘贴过来了…… ———————————————————————— 这题垃圾题!!神tm卡 ...

  7. some of the properties associated with the solution could not be read解决方法

    基于TFS管理的解决方案打开时提示:“some of the properties associated with the solution could not be read”,并不影响项目加载,O ...

  8. OS开发中的事件处理(二)-事件传递，响应者链条

    事件处理的事件传递 简介: 发生触摸事件后,系统会将该事件加入到一个由UIApplication管理的事件 队列中,UIApplication会从事件队列中取出最前面的事件,并将事件分发下去以便处理, ...

  9. HDU 4771 (DFS+BFS)

    Problem Description Harry Potter has some precious. For example, his invisible robe, his wand and hi ...

  10. [rsync]rsync设定及错误处理

    server端设置      修改/etc/default/rsync RSYNC_ENABLE=true RSYNC_OPTS='--address=10.192.0.5' RSYNC_NICE=' ...