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

<!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. 转载 - C++ - 关于ifstream/fstream流 判断文件是否结束eof()的问题

    出处:http://blog.csdn.net/shuilan0066/article/details/4669451 在做实验的时候遇到这个问题,找原因的时候发现出处除了讲明原因,还举了例子,所以记 ...

  2. Bugzilla 系统企业应用案例

    目录 一. 概述: - 4 - 二. 目的 - 4 - 三. 执行原则 - 4 - 四. 管理办法 - 4 - 五. BUG处理流程图 - 5 - 六. 主要职责 - 6 - 七. 需求类问题处理 - ...

  3. jsp之${CTX}理解

    jsp之${CTX} 根据自己的需要选择以下标签. <%@ taglib uri="/struts-tags" prefix="s"%> <% ...

  4. .NET跨平台 - WCF & Mono

    让WCF运行在Linux上(寄宿于服务器程序) WCF介绍请自行 bing 搜索 使用的开发工具为vs2017,系统为 Ubuntu16.04 服务器软件为Jexus ( 详情请看:  Jexus官网 ...

  5. AE 创建

    using System; using System.Drawing; using System.Runtime.InteropServices; using ESRI.ArcGIS.ADF; usi ...

  6. JS执行环境栈及事件循环机制—简洁明了的讲解

    JavaScript解释器在浏览器中是单线程的,这意味着浏览器在同一时间内只执行一个事件,对于其他的事件我们把它们排队在一个称为 执行栈(调用栈) 的地方.下表是一个单线程栈的抽象视图: 我们已经知道 ...

  7. Centos 7 Apache编译安装

    1.安装apache ./configure --prefix=/usr/local/apache2 --enable-rewrite --enable-so --enable-headers --e ...

  8. 怎样对Android设备进行网络抓包

    问题描写叙述: 前段时间自己的app訪问server的url总是会出现间接性失败的问题,于是和server的同事开了个会.提出了他们server存在的这个bug,我的同事自然说自己的server没问题 ...

  9. java学习笔记：文件名区分大小写

    我按照网上的教程,写了JAVA第一个程序:Hello World!,出了两个问题,都栽在 大小写 上. public class Hello { public static void main(Str ...

  10. CA certificate

    1 什么是CA certificate CA证书本质上是一把公钥. 2 为什么需要CA证书 是为了避免黑客冒充服务器,服务器通过CA证书证明自己是真的服务器,而不是黑客. 就是说,一旦客户端有了一个服 ...