㈠用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. WTForms常用的验证器

    from wtforms import Form,StringField,IntegerField from wtforms import validators from wtforms.valida ...

  2. 2019icpc南昌邀请赛B Polynomial （拉格朗日插值法）

    题目链接:https://nanti.jisuanke.com/t/40254 题意: 思路: 这题要用到拉格朗日插值法,网上查了一下,找到一份讲得特别好的: -------------------- ...

  3. TCP/IP 物理层卷四 -- 数据报与虚电路

    一.数据报(Datagram) 1.1 概念 数据报是分组交换的一种,主要向通信子网中的端系统提供无连接的分组交换服务.通信子网的某主机发送一个报文时,无需建立连接,只需在实现高层协议的前提下对数据拆 ...

  4. C++多线程基础学习笔记（五）

    一.互斥量 1.1 互斥量的基本概念 简单来说,一个锁就是一个互斥量,既然是锁,就有两种状态:加锁和解锁,通过加锁>>>操作共享数据>>>解锁的方式,实现保护共享数 ...

  5. priority_queue member function

    没有优先队列的dijkstra不算真的dijkstra 所以我又回来补常识了 <1>priority_queue::emplace <7>priority_queue::top ...

  6. P1816忠诚

    这是一个区间查询最值的问题,用线段树来做. 建树的时候,这里不是求和,应该是e[k].w=min(e[k*2].w,e[k*2+1].w),所以这里要注意以下,其次是查询的时候,因为本题不用让我们修改 ...

  7. 最短meeting路线（树的直径）--牛客第四场（meeting）

    题意: 给你一棵树,树上有些点是有人的,问你选一个点,最短的(最远的那个人的距离)是多少. 思路: 其实就是树的直径,两遍dfs,dfs第二遍的时候遇到人就更新直径就行了,ans是/2,奇数的话+1. ...

  8. python中进程的几种创建方式

    在新创建的子进程中,会把父进程的所有信息复制一份,它们之间的数据互不影响. 使用os.fork()创建 该方式只能用于Unix/Linux操作系统中,在windows不能用. import os # ...

  9. 33.服务之间的调用之RPC、Restful深入理解

    33.服务之间的调用之RPC.Restful深入理解 2018年05月08日 01:52:42 郑学炜 阅读数 13577更多 分类专栏: 6.框架   版权声明:本文为博主原创文章,遵循CC 4.0 ...

  10. 命名空间System.IO

    基本介绍:System.IO 命名空间提供读写文件和数据流的类型.基本文件和目录支持的类型. 原文:http://blog.sina.com.cn/s/blog_48a45b950100erhz.ht ...