㈠用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. 多标签分类(multi-label classification)综述

    意义 网络新闻往往含有丰富的语义,一篇文章既可以属于“经济”也可以属于“文化”.给网络新闻打多标签可以更好地反应文章的真实意义,方便日后的分类和使用. 难点 (1)类标数量不确定,有些样本可能只有一个 ...

  2. 查找担保圈-step1-担保圈表函数

    USE [test]; GO /****** Object: UserDefinedFunction [dbo].[f_findrecycle] Script Date: 2019/7/8 14:37 ...

  3. 使用Python基于OpenCV的图像油画特效

    算法步骤: 1.获取图像的灰度图片 2.设计一个小方框(4x4/8x8 /10x10等),统计每个小方框的像素值 3.将0-255的灰度值划分成几个等级,并把第二步处理的结果映射到所设置的各个等级中, ...

  4. Nginx启动错误 Failed to read PID from file /run/nginx.pid 的处理方法

    问题产生原因 因为 nginx 启动需要一点点时间,而 systemd 在 nginx 完成启动前就去读取 pid file 造成读取 pid 失败 解决方法 让 systemd 在执行 ExecSt ...

  5. ion-icon

    观察默认的使用 关于Ion-icon 图标的自定义,首先,看一看默认内置的图标的显示,是怎么来的 可以看到默认的路径为:/svg/ios-xxx.svg 自定义实现 那么这种路径是哪里来的,明显是an ...

  6. SQLServer 存储过程详解

    Transact-SQL中的存储过程,非常类似于Java语言中的方法,它可以重复调用.当存储过程执行一次后,可以将语句缓存中,这样下次执行的时候直接使用缓存中的语句.这样就可以提高存储过程的性能. Ø ...

  7. O023、理解Nova架构

    参考https://www.cnblogs.com/CloudMan6/p/5410447.html   Compute Service Nova 是OpenStack最核心的服务,负责维护和管理云环 ...

  8. nginx（五）- linux下安装nginx与配置

    linux系统为Centos 64位 准备目录 [root@instance-3lm099to ~]# mkdir /usr/local/nginx [root@instance-3lm099to ~ ...

  9. 02 Python数据结构的性能分析

    一.列表: - python 的设计者在实现列表数据结构的时候有很多选择.每一个这种选择都可能影响列表操作的性能.为了帮助他们做出正确的选择,他们查看了最常使用列表数据结构的方式,并且优化了实现,以便 ...

  10. Nginx安装目录详解

    Nginx安装目录详解 1. 查看有关nginx的所有目录列表,输入命令  rpm -ql nginx 可以查看有关nginx目录信息,但是注意 这种命令只能是在基于yum安装的方式才可以. 2. 下 ...