无缝衔接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>
时间: 2024-11-05 09:09:04

无缝衔接demo的相关文章

滑动轮播图实现最后一张图片无缝衔接第一张图片

原理:使用insertBefore和insertAfter方法调整图片顺序. 测试:firefox/chrome/IE11正常 已知不足:每次播放均使用了一次insertBefore和insertAfter,可考虑在最后一张图的时候将前几张图片整体后移.以后有空再优化. 1.HTML结构 alt的值将作为图片的描述信息出现在infobox里. <div class="outerbox"> <div class="innerbox"> <

[音乐] 逆转裁判1~6【五分半无缝衔接】追求组曲

来源:哔哩哔哩 https://www.bilibili.com/video/av6284081/ 满满的回忆啊,尤其是逆转三部曲.逆转四也真的很好玩,附逆转四海报 原文地址:https://www.cnblogs.com/FDProcess/p/9906534.html

android源码大放送(实战开发必备),免费安卓demo源码,例子大全文件详细列表

免费安卓demo源码,例子大全文件详细列表 本列表源码永久免费下载地址:http://www.jiandaima.com/blog/android-demo 卷 yunpan 的文件夹 PATH 列表 卷序列号为 0000-73EC E:. │ jiandaima.com文件列表生成.bat │ 例子大全说明.txt │ 本例子永久更新地址~.url │ 目录列表2016.03.10更新.txt │ ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签

无缝滚动详解

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> div,

Swift - 多层无缝循环滚动背景(SpriteKit游戏开发)

在游戏开发中,比如跑酷游戏.我们需要实现背景的无限循环滚动,来营造运动的效果.除了单层的背景滚动,还有视差滚动. 视差滚动是指让多层背景以不同的速度移动,形成立体的效果,从而带来非常出色的视觉体验. 样例说明: 1,本样例背景分为两层.第一层更靠近游戏窗口的色彩更鲜艳,移动速度也更快一些.第二层由于要模拟远处的场景,所以颜色也更淡一些,对比度更弱一些,移动速度也更慢一些. 2,要实现循环滚动.我们准备的背景图首尾是要可以无缝衔接的. 3,判断需要多少张无缝衔接图来组成背景?判断标准是:当第一张图

CSS3实现无限循环的无缝滚动

有时候在页面的某个模块中,需要无限循环的滚动一些消息.那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)? 克隆A一份完全一样的数据B放在原数据A的后面: 使用setInterval向上滚动A的父级容器: 当向上滚动的距离L正好的A的高度时(L==A.height()),L=0,重新开始滚动,无限循环. 克隆一份数据放在后面,是为了当A向上移动时,后面有数据能填补漏出来的空白.当B移动到可视区域的顶部时,此时A刚好移出可视区域,那么此时将容器重新归0,用户是没有感知

超简单的纯CSS图片无缝循环方法

首先效果如下. 效果就是若干长图通过视口,并且第一张和最后一张要无缝衔接. 接着原理图如下.真的,超简单... 注意:第一张和最后一张必须要是同一张图,这样才能无缝衔接. 如果视口大于每张图片,那就有必要第1,2甚至3张和倒数第3,2,1张相同,这样才能在视口大于图片的情况下完成完成衔接. 从右往左滚动,或者垂直方向滚动效果稍加变动代码即可实现. 代码如下 <!DOCTYPE html> <html> <head lang="en"> <met

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

一.前言 Hi,大家好,我是承香墨影! 开门见山,开篇名义.今天来聊聊如何将多段视频,拼接成一个完整而连续的视频,然后无缝进行播放. 这样的需求应该不算偏门吧? 最简单的就是一些视频 App,会将大段的视频切割成小段的视频进行播放,还有一些在播放视频之前,会插播一段广告,这些需求都可以被本文的内容覆盖到. 说到多个视频拼接来说,如果你了解过 Google 出的 ExoPlayer 的话,它其内正好有一个 ConcatenatingMediaSource 可以来完成多个视频源的拼接工作,并且 Ap

h5新特性

  CSDN博客 Gane_Cheng HTML5新特性浅谈 发表于2016/10/17 21:25:58  7809人阅读 分类: 前端 转载请注明出处: http://blog.csdn.net/gane_cheng/article/details/52819118 http://www.ganecheng.tech/blog/52819118.html (浏览效果更好) 2014年10月29日,W3C宣布,经过接近8年的艰苦努力,HTML5标准规范终于制定完成. HTML5将会取代