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

<!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. tyvj1271 零式求和

    描述 请考虑一个由1到N(N=3, 4, 5 ... 9)的数字组成的递增数列:1 2 3 ... N.现在请在数列中插入“+”表示加,或者“-”表示减,抑或是“ ”表示空白(例如1-2 3就等于1- ...

  2. [bzoj1613][Usaco2008 Jan]Running贝茜的晨练计划_动态规划

    Running贝茜的晨练计划 bzoj-1613 Usaco-2008 Jan 题目大意:题目链接(U组题题意真的是没法概括qwq....). 注释:略. 想法:一眼dp题. 状态:dp[i][j]表 ...

  3. qscoj Round 1(div 2)

    卿学姐OJ……很休闲啊……? A 分析:枚举/exgcd B 分析:栈模拟 弄个栈模拟配对过程,将能够配对的()位置染色,最后最长的一段染色区间就是答案 C 分析:dp f[i][j]表示前i个物品, ...

  4. BZOJ(2) 1041: [HAOI2008]圆上的整点

    1041: [HAOI2008]圆上的整点 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 4966  Solved: 2258[Submit][Sta ...

  5. LSN

    http://www.cnblogs.com/lyhabc/archive/2013/07/16/3194220.html

  6. Git flow的分支模型与及经常使用命令简单介绍

    Git flow是git的一个扩展集,它基于Vincent Driessen 的分支模型,文章"A successful Git branching model"对这一分支模型进行 ...

  7. Linux经常使用命令002之搜索命令locate、whereis、which、find、grep

    Linux经常使用命令002之搜索命令locate.whereis.which.find.grep -20150811 经常使用搜索命令 -------文件搜索命令---------- -->l ...

  8. 工作总结 datatable 里的 数据 rows Columns

    json 格式数据 row  6行   每行 81 列   对应数据 col   81 列 每列代表字段

  9. js 数字格式化，只能输入正负整数，小数

    1.只能输入正整数 <input name="columnValue" class="input96 required" type="text& ...

  10. IT痴汉的工作现状22-由Dalvik虚拟机引发的口水战

    Dalvik是啥呢? 从未知道冰岛有Dalvik这么一个重要的村庄.直到Dan Bornstein将自己为Android系统编写的进程虚拟机命名为Dalvik后才被我所知. 它是Android系统独有 ...