如题。

<!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. return 返回字符串

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  2. Prepare方法和UnPrepare方法

    Query组件提供的Prepare方法的作用是通知BDE或数据库服务器优化并准备执行SQL操作.Query的Prepare方法能优化执行的原因在于该方法是是在SQL语句执行前就对其进行分析.检查和编译 ...

  3. 【python】使用枚举类

    当我们需要定义常量时,一个办法是用大写变量通过整数来定义,例如月份: JAN = 1 FEB = 2 MAR = 3 ... NOV = 11 DEC = 12 好处是简单,缺点是类型是int,并且仍 ...

  4. CentOS 文本搜索grep

    grep 用于在文本中执行关键词搜索, 用法: grep [选项]... PATTERN [FILE]... [root@bigdata-senior01 ~]# grep "ftp&quo ...

  5. 【BZOJ5297】【CQOI2018】社交网络（矩阵树定理）

    [BZOJ5297][CQOI2018]社交网络(矩阵树定理) 题面 BZOJ 洛谷 Description 当今社会,在社交网络上看朋友的消息已经成为许多人生活的一部分.通常,一个用户在社交网络上发 ...

  6. cf 460 E. Congruence Equation 数学题

    cf 460 E. Congruence Equation 数学题 题意: 给出一个x 计算<=x的满足下列的条件正整数n的个数 \(p是素数,2 ≤ p ≤ 10^{6} + 3, 1 ≤ a ...

  7. 全面解析JavaScript的Backbone.js框架中的Router路由

    这篇文章主要介绍了Backbone.js框架中的Router路由功能,Router在Backbone中相当于一个MVC框架中的Controller控制器功能,需要的朋友可以参考下. Backbone ...

  8. 中国MOOC_面向对象程序设计——Java语言_第3周 对象容器_1查找里程

    第3周编程题 查看帮助 返回   第3周编程题.注意程序(包括注释)中不能出现汉字. 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后 ...

  9. Codeforces Round #343 (Div. 2) B

    B. Far Relative’s Problem time limit per test 2 seconds memory limit per test 256 megabytes input st ...

  10. 任务调度 Quartz 学习（一） SimpleTrigger

    概述: 在实际开发过程中,会遇到很多任务调度的需求. 比如说:某网站要在每周一上午9点更新网站数据,并发邮件通知用户: 再比如某论坛需求:每隔半个小时生成精华文章的RSS文件,每天凌晨统计论坛用户的积 ...