无缝衔接demo
如题。
<!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的更多相关文章
- DJI Terra+EasyEarth让数据获取与应用无缝衔接
大数据时代对地理信息数据的获取与应用提出了更高的要求: ⏩低成本.全要素.高效获取 ⏩数据采集.处理到应用无缝衔接 DJI Terra大疆智图 DJI Terra大疆智图是一款提供自主航线规划.飞行航 ...
- ModelArts 与HiLens Kit联合开发丨行人社交距离风险提示Demo
摘要:本Demo使用YOLOv3_Resnet18模型来检测的视频流中的行人,获取行人坐标(即图中蓝色方框),然后计算所有检测到的人之间的相互"距离". 前情提要 听到行人社交距离 ...
- Swift - 多层无缝循环滚动背景（SpriteKit游戏开发）
在游戏开发中,比如跑酷游戏.我们需要实现背景的无限循环滚动,来营造运动的效果.除了单层的背景滚动,还有视差滚动. 视差滚动是指让多层背景以不同的速度移动,形成立体的效果,从而带来非常出色的视觉体验. ...
- 用CSS3实现无限循环的无缝滚动
有时候在页面的某个模块中,需要无限循环的滚动一些消息.那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)? 克隆A一份完全一样的数据B放在原数据A的后面: 使用setIn ...
- 基于 IJKPlayer-concat 协议的视频无缝拼接技术实现
一.前言 Hi,大家好,我是承香墨影! 开门见山,开篇名义.今天来聊聊如何将多段视频,拼接成一个完整而连续的视频,然后无缝进行播放. 这样的需求应该不算偏门吧? 最简单的就是一些视频 App,会将大段 ...
- 值得H5前端学习的60个JS插件(含DEMO演示)
下面也可以说是H5前端学习的js插件大全.基本包含了大部分的前端最前沿的js插件和库. 布局 SuperEmbed.js- 是一个Javascript库,可检测出网页上的内嵌视频并使他们能够变成响应式 ...
- 《Note --- Unreal 4 --- PersonaHowToMovement》
https://docs.unrealengine.com/latest/CHN/Gameplay/HowTo/CharacterMovement/index.html 这里的demo是按照一些per ...
- 最新版ssh hibernate spring struts2环境搭建
最新版ssh hibernate spring struts2环境搭建 最新版spring Framework下载地址:spring4.0.0RELEASE环境搭建 http://repo.sprin ...
- ExtJS笔记 Tree
The Tree Panel Component is one of the most versatile Components in Ext JS and is an excellent tool ...
随机推荐
- 设置启动窗体Program.cs文件
using System; using System.Collections.Generic; using System.Linq; using System.Windows.Forms; names ...
- 累积下学习 C#时和 Java时的不同点
==和equals()方法的区别: 首先有一个观点: 这两个都是用来比较值是否相等的 ( 这里的值有时候指的是地址值, 有时候是存储的值; 下面将地址值称为地址, 存储的值称为值 ) 在Java中: ...
- Jetty与Tomcat综合比较
Jetty基本架构 Jetty目前的是一个比较被看好的 Servlet 引擎,它的架构比较简单,也是一个可扩展性和非常灵活的应用服务器.它有一个基本数据模型,这个数据模型就是 Handler(处理器) ...
- java直接访问JNDI工具代码
import java.sql.*; import java.util.*; import javax.naming.*; import javax.sql.DataSource; public cl ...
- 【bzoj4698】[Sdoi2008] Sandy的卡片 后缀数组
题目描述 Sandy和Sue的热衷于收集干脆面中的卡片.然而,Sue收集卡片是因为卡片上漂亮的人物形象,而Sandy则是为了积攒卡片兑换超炫的人物模型.每一张卡片都由一些数字进行标记,第i张卡片的序列 ...
- 【bzoj1231】[Usaco2008 Nov]mixup2 混乱的奶牛 状态压缩dp
题目描述 混乱的奶牛[Don Piele, 2007]Farmer John的N(4 <= N <= 16)头奶牛中的每一头都有一个唯一的编号S_i (1 <= S_i <= ...
- 【bzoj1725】[USACO2006 Nov]Corn Fields牧场的安排 状态压缩dp
题目描述 Farmer John新买了一块长方形的牧场,这块牧场被划分成M列N行(1<=M<=12; 1<=N<=12),每一格都是一块正方形的土地.FJ打算在牧场上的某几格土 ...
- ubuntu简易教程（如何使用noi linux）
目录 linux环境下的基础操作 命令行操作 编辑器 程序编译 程序调试 gdb的使用 对拍 在提高组的考试中要求使用noi linux,因此了解一下如何在linux环境下编程是很有必要的. linu ...
- BZOJ4004：[JLOI2015]装备购买——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=4004 https://www.luogu.org/problemnew/show/P3265 脸哥 ...
- github clone 指定的tag
git clone --branch [tags标签] [git地址] 使用branch参数,后面加上tag标签,最后是git仓库的地址