如题。

<!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. Linux命令之查看cpu个数_核数_内存总数

    http://blog.csdn.net/cgwcgw_/article/details/10000053 cpu个数 cat /proc/cpuinfo | grep "physical ...

  2. ｔｃｐ发送缓冲区中的数据都是由产生数据的进程给推送到ip层还是有定时任务触发？

    和几个变量有非常大的关系 发送缓冲区的大小,如何单独设置一个socket的发送缓冲区 socketopt 发送缓冲区中的数据,如果被拥塞窗口限制住了,那么这些数据可能就放在tcpbuffer里的,此时 ...

  3. TCP协议详解7层和4层解析(美团，阿里) 尤其是三次握手，四次挥手 具体发送的报文和状态都要掌握

    如果想了解HTTP的协议结构,原理,post,get的区别(阿里面试题目),请参考:HTTP协议 结构,get post 区别(阿里面试) 这里有个大白话的解说,可以参考:TCP/IP协议三次握手和四 ...

  4. [计算机网络] 互联网协议栈（TCP/IP参考模型）各层的主要功能及相应协议

    应用层:提供用户与网络间的接口.----HTTP.FTP.SMTP 运输层:进程到进程间的数据传输.---TCP.UDP 网络层:主机到主机之间的数据传输.---IP.选路协议 数据链路层:相邻结点之 ...

  5. matlab exist函数

    函数作用:用于确定某变量或值是否存在. 调用格式: exist主要有两种形式,一个参数和两个参数的,作用都是用于确定某值是否存在:1. b = exist( a) 若 a 存在,则 b = 1: 否则 ...

  6. 【bzoj1727】[Usaco2006 Open]The Milk Queue 挤奶队列 贪心

    题目描述 Every morning, Farmer John's N (1 <= N <= 25,000) cows all line up for milking. In an eff ...

  7. Python 开篇及第一个Python程序

    本节内容 python 简单介绍 python 2.x 或者python 3.x python 安装 第一个python程序 一.python简单介绍 python的创始人为吉多.范罗苏姆(Guido ...

  8. BZOJ1195 HNOI2006最短母串（状压dp）

    按照子串出现的先后考虑.令f[i][j]为已经出现的字符串集合为i,最后一个出现的字符串为j时的最短串长,预处理一下任意两个串的最长重叠长度,转移显然.有点麻烦的是字典序,强行增加代码难度. 另一个比 ...

  9. Django+Celery+Redis实现异步任务（发送邮件）

    安装如下依赖库 pip install Celery pip install django-celery pip install django-redis 还要安装本地的Redis服务 setting ...

  10. 【刷题】BZOJ 3510 首都

    Description 在X星球上有N个国家,每个国家占据着X星球的一座城市.由于国家之间是敌对关系,所以不同国家的两个城市是不会有公路相连的. X星球上战乱频发,如果A国打败了B国,那么B国将永远从 ...