㈠用HTML5+CSS3做无限滚动效果

⑴逻辑分析

⑵实践示例

前5张图片为所有图片显示区，假设总长度为1100px；

后面出现的五张图片为克隆区，只是将前面的图片拷贝了一份；

然后将前五张和后五张的内容“捆绑”放在一个ul中，滚动的时候，就可以使得他们整体移动了

为了方便起见，尽量将ul的宽度设置的大一点，这样的话，可以容纳足够多的图片，包括克隆的图片

代码示例：

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        #container{

            width:800px;

            height:300px;

            margin:100px auto;

            overflow: hidden;

            position: relative;

        }

        #container ul{

            list-style: none;

            width:4000px;

            left:0;

            top:0;

            position: absolute;

            -webkit-animation:scoll 6s linear 0s infinite;

        }

        #container ul li{

            float:left;

            margin-right:20px;

        }

        @-webkit-keyframes scoll{

            from{

                left:0;

            }

            to{

                left:-1100px;

            }

        } 

    </style>

</head>

<body>

    <div id="container">

        <ul>

            <li><a href="#"><img src="xz6.jpg" /></a></li>

            <li><a href="#"><img src="xz2.jpg" /></a></li>

            <li><a href="#"><img src="xz3.jpg" /></a></li>

            <li><a href="#"><img src="xz4.jpg" /></a></li>

            <li><a href="#"><img src="xz1.jpg" /></a></li>

            <li><a href="#"><img src="xz6.jpg" /></a></li>

            <li><a href="#"><img src="xz2.jpg" /></a></li>

            <li><a href="#"><img src="xz3.jpg" /></a></li>

            <li><a href="#"><img src="xz4.jpg" /></a></li>

            <li><a href="#"><img src="xz1.jpg" /></a></li>

        </ul>

    </div>

</body>

</html>

效果图：

 

㈡用HTML5+CSS3做文字跳动

思路分析：

1. 由于文字有层次感的跳动，所以我们应该 "各个击破"， 每个文字有它自己的 "空间"。

2. 各个文字有先有后的跳动，所以我们应该一次递增每个文字的动画时长。

3. span标签默认是行内元素；但是对它们进行float操作之后，它们会变成块级元素。

代码示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        h2 span{

            float:left;

            position: relative;

        }

        h2 span:nth-child(1){

            -webkit-animation:jump 1s linear 0s infinite alternate;

        }

        h2 span:nth-child(2){

            -webkit-animation:jump 1s linear 0.2s infinite alternate;

        }

        h2 span:nth-child(3){

            -webkit-animation:jump 1s linear 0.4s infinite alternate;

        }

        h2 span:nth-child(4){

            -webkit-animation:jump 1s linear 0.6s infinite alternate;

        }

        h2 span:nth-child(5){

            -webkit-animation:jump 1s linear 0.8s infinite alternate;

        }

        @-webkit-keyframes jump

        {

            0%{

                top:0px;

                color:red;

            }

            50%{

                top:-10px;

                color:green;

            }

            100%{

                top:10px;

                color:blue;

            }

        }

    </style>

</head>

<body>

    <h2>

        <span>石</span>

        <span>海</span>

        <span>莹</span>

        <span>的</span>

        <span>博</span>

        <span>客</span>

    </h2>

</body>

</html>

效果图：

 

 参考：https://blog.csdn.net/sinat_27706697/article/details/49699367

HTML5+CSS3制作无限滚动与文字跳动效果的更多相关文章

  1. 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

    本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...

  2. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  3. masonry结合json 制作无限滚动的瀑布流

    做前端这行的 能直接贴代码就直接贴代码了,不用多说什么别的 效果需要引入jquery和jquery.masonry.min.js这两个JS JS代码如下: $(document).ready(func ...

  4. 用CSS3制作50个超棒动画效果教程

    这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...

  5. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  6. 使用HTML5/CSS3制作便签贴

    利用HTML5/CSS3,仅用5步就可以制作便签贴效果的HTML页面,效果图如下: (注:图里的文字纯属杜撰,搞笑目的,如有雷同,纯属巧合,谢谢!) 注:该效果可以在Safari, Chrome,Fi ...

  7. 分享9款用HTML5/CSS3制作的动物人物动画

    1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 ...

  8. 纯HTML5+CSS3制作生日蛋糕

    以一个前端开发的身份绘制一个简单的蛋糕庆祝一下今天这个好日子吧,程序员庆生的乐趣与哀愁啊.写的比较简陋,感兴趣的看一下吧. 先发个效果图吧 蛋糕分为三个部分,底部蛋糕,顶层蛋糕和蜡烛部分.HTML的布 ...

  9. html5+css3实现跑动的爱心/动态水滴效果[原创][5+3时代]

    大风起兮云飞扬,安得猛士兮走四方!html5+css3,不学不行. 做web开发已经有好几年了,见证了太多语言的崛起和陨落. 其实作为一个程序员最苦逼的事情莫过于每天要不停的追赶各大公司新出的框架和语 ...

随机推荐

  1. Linux基础命令---间歇执行命令---watch

    [watch] watch指令可以间歇性的执行程序,将输出结果以全屏的方式显示,默认是2s执行一次. watch指令下发后,将会一直被执行,直到被中断. [语法] watch \ [-d h v t] ...

  2. spring5源码分析系列（三）——IOC容器的初始化（一）

    前言: IOC容器的初始化包括BeanDefinition的Resource定位.载入.注册三个基本过程. 本文以ApplicationContext为例讲解,XmlWebApplicationCon ...

  3. zk安装管理

    参考: https://www.cnblogs.com/yinzhengjie/p/9209319.html 10.52.110.48 bi-kafka-310.52.48.92 bi-kafka-1 ...

  4. Dubbo使用Sentinel来对服务进行降级与限流

    一.Sentinel 是什么 Sentinel 是阿里中间件团队开源的,面向分布式服务架构的轻量级流量控制产品,主要以流量为切入点,从流量控制.熔断降级.系统负载保护等多个维度来帮助用户保护服务的稳定 ...

  5. 小菜鸟之java异常

    一.异常简介 什么是异常? 异常就是有异于常态,和正常情况不一样,有错误出错.在java中,阻止当前方法或作用域的情况,称之为异常. java中异常的体系是怎么样的呢? 1.Java中的所有不正常类都 ...

  6. HYSBZ 1797 Mincut 最小割

    Descrption A,B两个国家正在交战,其中A国的物资运输网中有N个中转站,M条单向道路.设其中第i (1≤i≤M)条道路连接了vi,ui两个中转站,那么中转站vi可以通过该道路到达ui中转站, ...

  7. RuntimeError: Model class user.models.User doesn't declare an explicit app_label and isn't in an application in INSTALLED_APPS.

    Django 2.x版本迁移数据库报这个错误,user表使用的Django的验证系统 本来就想改一下用户表的表名,莫名的报了个这个错误,在网上找到了解决办法 打开user应用模块下的apps.py文件 ...

  8. 学习python基础规则

    前面应该是记流水账的方式,毕竟学习的内容不多无法产出什么有效的内容. 这两天从开始下载Python开始学习,一路顺畅冒的问题,直到开始学习python的游戏规则,严格缩进.注释及‘’的使用等感觉还不错 ...

  9. ELF文件格式理解

    ELF(Executable and Linking Format)是一种对象文件的格式,用于定义不同类型的对象文件(Object files)中都放了什么东西.以及都以什么样的格式去放这些东西.它自 ...

  10. spring 在web.xml 里面如何使用多个xml配置文件

    1, 在web.xml中定义 contextConfigLocation参数.spring会使用这个参数加载.所有逗号分割的xml.如果没有这个参数,spring默认加载web-inf/applica ...