㈠用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. kafka服务器批量copy文件脚本

    #!/bin/bashif [[ $# -lt 1 ]] ; then echo no params ; exit ; fiparams=$@for (( i=1 ; i <= 3 ; i = ...

  2. 常用PostgreSQL HA（高可用）工具收集

    PostgreSQL HA Collect: 1.pgpool 2.Pacemaker + Corosync 3.ecox 4.Patroni: A Template for PostgreSQL H ...

  3. 【DP 好题】hihoCoder #1520 古老数字

    题目链接 这道题的要点是状态转移的顺序. 要从低位向高位进行状态转移. Implementation string s; cin >> s; reverse(all(s)); int x, ...

  4. 【Usaco2014Open银组】双导航(gpsdual)

    题目 [题目描述] FJ 最近网购了一台小车.但是由于他的草率,在选择加装物品时偶然地点击了两次"Submit" ,结果最后他的小车装了两台GPS 导航系统!更糟的是,这两个系统对 ...

  5. 正则爬取某段子网站前20页段子(request库)

    首先还是谷歌浏览器抓包对该网站数据进行分析,结果如下: 该网站地址:http://www.budejie.com/text 该网站数据都是通过html页面进行展示,网站url默认为第一页,http:/ ...

  6. USB键盘驱动分析

    简介 本文介绍USB驱动程序编写的流程,分析一个键盘的USB程序,基于linux-2.6.39 USB驱动概要 分层 主机层面的USB驱动的整体架构可以分成4层,自顶到下依次是 1.USB设备驱动:本 ...

  7. Https接口调用工具类

    ClientUtil.java import org.apache.http.HttpEntity; import org.apache.http.HttpResponse; import org. ...

  8. 模块之re模块 正则表达式

    正则表达式,正则表达式在处理字符串上有先天的优势,尤其大数量的字符串.先来记一个网站,此网站功能就是关于正则表达式方面的应用http://tool.chinaz.com/regex/ 单纯的正则表达式 ...

  9. java程序中访问https时，报 PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target

    在java中使用https访问数据时报异常: Caused by: sun.security.validator.ValidatorException: PKIX path building fail ...

  10. nginx+php设置大文件请求上传(502及504问题处理)

    502问题 php-fpm 修改项: request_terminate_timeout 位置: eg: /etc/php5/fpm2/pool.d/www.conf ; The timeout fo ...