无缝滚动：是两组拼在一起的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        div {

            width: 300px;

            height: 50px;

            margin: 200px auto;

            overflow: hidden;

        }

        ul {

            list-style: none;

            width: 620px;

            height: 50px;

            animation: gun 3s infinite linear;

        }

        li {

            float: left;

            width: 50px;

            height: 50px;

            background-color: rgba(0, 0, 0, 0.6);

            text-align: center;

            font: 500 20px/50px "Microsoft YaHei UI";

        }

        @keyframes gun {

            0% {

                transform: translateX(0px);

            }

            100% {

                transform: translateX(-300px);

            }

        }

    </style>

</head>

<body>

<div>

    <ul>

        <li>无</li>

        <li>缝</li>

        <li>滚</li>

        <li>动</li>

        <li>效</li>

        <li>果</li>

        <li>无</li>

        <li>缝</li>

        <li>滚</li>

        <li>动</li>

        <li>效</li>

        <li>果</li>

    </ul>

</div>

</body>

</html>

html5——动画案例（无缝滚动）的更多相关文章

  1. CSS3动画之无缝滚动

    与js的无缝滚动类似,整个承载图片的盒子移动,克隆一组图片放置最后,当一组图片播放结束后将盒子定位在有一组图片宽度的左侧 HTML结构: <div class="box"&g ...

  2. js动画之无缝滚动

    效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  3. html5——动画案例（时钟）

    1.秒钟转360度需要60s分60步 2.分针转360度需要3600s分60步 3.秒钟转360度需要43200s分60步 <!DOCTYPE html> <html lang=&q ...

  4. html5——动画案例（大海）

    太阳的发散效果主要是利用transform: scale(1.3),将物体变大 <!DOCTYPE html> <html lang="en"> <h ...

  5. html5——动画案例（太阳系）

    太阳系主要利用定位,伪元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  6. 精选19款华丽的HTML5动画和实用案例

    下面是本人收集的19款超酷HTML5动画和实用案例,觉得不错,分享给大家. 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天 ...

  7. JS 实现无缝滚动动画原理（初学者入）

    这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...

  8. 利用CSS实现带相同间隔地无缝滚动动画

    说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...

  9. JS运动 - 无缝滚动和缓动动画

    JS运动 - 无缝滚动和缓动动画 无缝滚动原理:首先先复制两张图片(第一张和第二张)放到最后面;ul绝对定位,如果ul的left值大于等于4张图片的宽度,就应该快速复原为0. html <!DO ...

随机推荐

  1. nyoj_600_花儿朵朵_201404162000

    花儿朵朵 时间限制:1000 ms  |  内存限制:65535 KB 难度:5   描述 春天到了,花儿朵朵盛开,hrdv是一座大花园的主人,在他的花园里种着许多种鲜花,每当这个时候,就会有一大群游 ...

  2. 1154 能量项链 2006年NOIP全国联赛提高组 codevs

    1154 能量项链  2006年NOIP全国联赛提高组 codevs 题目描述 Description 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头 ...

  3. 微信最新开源的PhxSQL

    在编者看到“[重磅]微信开源PhxSQL:高可用.强一致的MySQL集群”时,由衷赞叹,这等造福广大DBA及运维同仁的事情,真心赞.腾讯及微信的开放,真的不是说说而已. 本文由资深DB从业者撰写,相信 ...

  4. 关于NSString,NSMutableString,NSArray,NSMutableArray,NSDictionary,NSMutableDictionary

    NSString,NSMutableString,NSArray,NSMutableArray,NSDictionary,NSMutableDictionary 在 OC 中我们天天都要用,而我们要怎 ...

  5. 在SAE搭建Python+Django+MySQL（基于Windows）

    为了与时俱进,工作闲余開始研究Python,刚一接触就被Python这"优雅"的语法吸引住.后来接触到了Django.尽管还没有太深入的研究.但对这样的新概念的WEB开发非常感兴趣 ...

  6. LeetCode OJ 322. Coin Change DP求解

    题目链接:https://leetcode.com/problems/coin-change/ 322. Coin Change My Submissions Question Total Accep ...

  7. hdu 5416 CRB and Tree(2015 Multi-University Training Contest 10)

    CRB and Tree                                                             Time Limit: 8000/4000 MS (J ...

  8. Codeforces Round #273 (Div. 2)D. Red-Green Towers DP

    D. Red-Green Towers   There are r red and g green blocks for construction of the red-green tower. Re ...

  9. 异步POST请求解析JSON

    异步POST请求解析JSON 一.创建URL NSURL *url = [NSURL URLWithString:@"http://localhost:8080/MJServer/order ...

  10. AngularJS2.0 quick start——其和typescript结合需要额外依赖

    AngularJS2 发布于2016年9月份,它是基于ES6来开发的. 运行条件! 由于目前各种环境(浏览器或 Node)暂不支持ES6的代码,所以需要一些shim和polyfill(IE需要)让ES ...