如题。

<!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. java 基础 --集合--012

    1, 数组与集合 A:长度不同 数组的长度固定,集合的长度可变 B:内容不同 数组里存储的是同一种类型的元素,而集合可以存储不同类型的元素 C:元素的数据类型问题 数组可以存储基本数据类型,也可以存储 ...

  2. 【EF】解决EF批量操作，Z.EntityFramework.Extensions 过期方案

    方案一: 使用EntityFramework.Extended优点: 启下载量是Z.EntityFramework.Extensions的10倍+ 不会过期缺点:不能批量Insert 方案二:解决批量 ...

  3. 【Python】安装python包时遇到"error: Microsoft Visual C++ 9.0 is required"的简答

    简答 在Windows下用pip安装Scrapy报如下错误, error: Microsoft Visual C++ 9.0 is required (Unable to find vcvarsall ...

  4. WCF服务的建立以及调用

    WCF对我来说既陌生又熟悉,陌生是因为没怎么接触过,熟悉是听得太多,今天抽出点时间看了一下WCF,并且自己也写了一WCF的小程序以及调用WCF.步骤为: 1.创建一个解决方案WCF,和一个控制台项目W ...

  5. [Leetcode] Binary tree postorder traversal二叉树后序遍历

    Given a binary tree, return the postorder traversal of its nodes' values. For example:Given binary t ...

  6. 20165218 预备作业3 Linux安装及学习

    Linux安装及学习 第二节 基本概念及操作 1. 关于图形界面 Linux本身是没有图形界面的,对于初学者来说,这或许是其与Windows系统最直观的差别.Linux所呈现给用户的实际上是一个实现图 ...

  7. 根据银行卡号码获取银行卡归属行以及logo图标

    根据银行卡号码获取银行卡归属地信息接口地址,get请求 https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?_input_charset= ...

  8. group by多字段分组

    在平时的开发任务中我们经常会用到MYSQL的GROUP BY分组, 用来获取数据表中以分组字段为依据的统计数据.比如有一个学生选课表,表结构如下: Table: Subject_Selection S ...

  9. 题解【poj2774 Long Long Message】

    Description 求两个串的最长连续公共字串 Solution 后缀数组入门题吧 把两个串连在一起,中间加一个分隔符,然后跑一遍后缀数组,得到 height 和 sa 一个 height[i] ...

  10. floor ceil

    echo floor(11/10); echo ceil(11/10); swiper  可以用在ajax的success中,如果用ejs拼接的,放ajax里面才可以轮播