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

<!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. Spring的发展【一】

    1.1. Spring1.x 时代 在Spring1.x时代,都是通过xml文件配置bean,随着项目的不断扩大,需要将xml配置分放到不同的配置文件中,需要频繁的在java类和xml配置文件中切换. ...

  2. Codeforces 314B(倍增)

    题意:[a,b]表示将字符串a循环写b遍,[c,d]表示把字符串c循环写d遍,给定a,b,c,d,求一个最大的p,使得[[c,d],p]是[a,b]的子序列(注意不是子串,也就是不要求连续).(b,d ...

  3. wsgi初探

    大半夜的不睡觉,起来看技术文档,我这是什么精神啊~ ok 本文的大部分内容都是阅读 http://wsgi.readthedocs.org/en/latest/ 得来的.下面开始研究 wsgi wsg ...

  4. python的setdefault

    Python 字典 setdefault() 方法和get()方法类似, 如果键不已经存在于字典中,将会添加键并将值设为默认值. dict.setdefault(key, default=None)

  5. 1.求整数最大的连续0的个数 BinaryGap Find longest sequence of zeros in binary representation of an integer.

    求整数最大的连续0的个数 A binary gap within a positive integer N is any maximal sequence of consecutive zeros t ...

  6. android 程序猿跳槽须要注意哪些？

    我是一个工作3年多的android开发,因为公司和个人发展原因.打算跳槽! 这次跳槽又给我好好的上了一课!所以我自己反思总结了一下.然后整理出一下几点 程序猿打算跳槽的时候须要注意的几点. 一 先想好 ...

  7. hihoCoder #1175 : 拓扑排序&#183;二

    [题目链接]:click here~~ 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描写叙述 小Hi和小Ho所在学校的校园网被黑客入侵并投放了病毒.这事在校内BBS上立马引 ...

  8. 分布式缓存Redis应用场景解析

    Redis的应用场景非常广泛.虽然Redis是一个key-value的内存数据库,但在实际场景中,Redis经常被作为缓存来使用,如面对数据高并发的读写.海量数据的读写等. 举个例子,A网站首页一天有 ...

  9. P4700 算

    P4700 算 时间: 1000ms / 空间: 125829120KiB / Java类名: Main 背景 zhx和他的妹子出去玩. 描述

  10. 获取Access数据里所有表的名称和表的字段

    -------------//获取Access数据库表名        public void GetTableName()        {                string connSt ...