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

<!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. Neo4j 的一些使用心得

    由对图数据的处理需求,看到了图数据库(GraphDataBase)这种比较新的数据库模式,并且通过比较发现用的相对多的要属Neo4j了,现在来看网上对Neo4j的介绍还比较少,内容主要来源于三个地方: ...

  2. 作DJANGO ORM时的一些最佳实践

    还是国外的正规,都在作DJANGO ORM的解藕化工作了. 外键不用,多对多,一对多,不用. 参考URL: http://scottlobdell.me/2015/01/sql-database-be ...

  3. 【Cloud Foundry】Could Foundry学习（一）——Could Foundry浅谈

    在阅读的过程中有不论什么问题.欢迎一起交流 邮箱:1494713801@qq.com    QQ:1494713801 Cloud Foundry是VMware推出的业界第一个开源PaaS云平台.他包 ...

  4. 运行系统命令而且将输出写到指定日志文件的shell脚本(2)

    上一篇是个简单的能够运行而且写入日志的脚本,可是假设放到生产环境上就显得太粗糙了,所以须要进一步的优化: #! /bin/bash if [ -d "/opt/bmc" ] ; t ...

  5. docker（1）：virtualbox 安装CoreOS系统，配置registry-mirror

    本文的原文连接是: http://blog.csdn.net/freewebsys/article/details/51093850 未经博主同意不得转载. 博主地址是:http://blog.csd ...

  6. Eclipse导入外部项目问题总结

     此次在项目开发过程中导入从oksvn下载的共享项目时出现几个项目在不同的IDE导入导出时的问题,为免忘记做例如以下笔记: 1 类路径问题 在Java开发中大多数的开发人员使用的IDE是MyEcl ...

  7. splay专题复习——bzoj 3224 &amp; 1862 &amp; 1503 题解

    [前言]快要省选二试了.上次去被虐出翔了~~这次即便是打酱油.也要打出风採!于是暂停新东西的学习.然后開始复习曾经的知识,为骗分做准备.PS:区间翻转的临时跳过,就算学了也来不及巩固了. [BZOJ3 ...

  8. struts2 全局拦截器，显示请求方法和參数

    后台系统中应该须要一个功能那就是将每一个请求的url地址和请求的參数log出来,方便系统调试和bug追踪,使用struts2时能够使用struts2的全局拦截器实现此功能: import java.u ...

  9. 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 ...

  10. 技术的止境（客户价值第一，快速实现第二，边做边学，迅速成为牛人。紧贴客户的需求去做技术，立于不败之地。追求的目标：把一项产品去做好，用产品去养活自己和家人）good

    作为一个依靠技术来谋生的程序员,我最近一直在思考一个问题,有限的生命里,面对无限的技术更新,我要研究到什么程度才能算是完成我的成为技术大牛的目标呢?换而言之,那就是技术的止境在哪儿呢?深入的思考下去, ...