㈠用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. flutter环境配置（windows）

    参考以下链接 下载安装步骤: https://www.cnblogs.com/yangyxd/p/8809512.html 安装Flutter环境遇到Android license status un ...

  2. 【Linux-驱动】将cdev加入到系统中去---cdev_add

    在我们已经完成了对cdev结构体的初始化之后,我们需要将这个cdev结构体加入到系统中去,使用函数 cdev_add: /** * cdev_add() 讲一个字符设备加入到系统中去 * @p: 字符 ...

  3. liunx crontab 定时访问指定url

    链接主机 crontab -e 打开文件,直接输入需要执行的脚本 1 9 * * * /usr/bin/curl http://www.baidu.com 语法解析 * * * * * /usr/bi ...

  4. 高效编程之 cProfile 性能分析

    写代码经常会听说一些名词,比如 性能分析.代码调优. cProfile 是 python 代码调优的一种工具,它能够统计在整个代码执行过程中,每个函数调用的次数和消耗的时间. 这个工具虽然很常用,但是 ...

  5. java中代码块和构造方法以及普通方法的代码执行顺序总结

    说实话,这块真的不好理解啊~都怪jvm  执行顺序搞这么复杂,哼╭(╯^╰)╮ 但是  我们能怎么办,只能研究呗!!! !:首先,毫无置疑的,静态代码块在加载时就执行了,所以肯定是最先执行的.... ...

  6. new Date，Date.parse()传值

    获取时间: 获取1997年10月1号日期 new Date: 当使用 - 拼接年月日时将会使用UTC时区解析参数,会比北京时间快八小时. 当时用 / 拼接年月日时会使用北京的时区去解析参数,取到的是北 ...

  7. LVS DR模型RS端修改配置脚本

    #!/bin/bash vip=x.x.x.x in start) > /proc/sys/net/ipv4/conf/all/arp_ignore > /proc/sys/net/ipv ...

  8. Java缓存要点

    1.缓存一般是这样的:先查缓存,查不到就查DB,如果DB查不到就结束,DB查到了就写入缓存. 如果用户一直在大量地查询不存在的数据,则所有的请求都会落到DB,而且没有数据写入缓存. 解决方法:把查不到 ...

  9. ActiveMQ基础01——Linux下载安装ActiveMQ

    1.下载 下载地址:http://activemq.apache.org/ 点击按钮 下载Linux下最新版安装包,点击即可下载 2.安装ActiveMQ 将之前下载的安装包上传到linux当中,一般 ...

  10. 解决Redis中文乱码问题

    启动客户端的时候添加 --raw 选项即可 wangyulong@code-local:~$ redis-cli 127.0.0.1:6379> set key1 '上海' OK 127.0.0 ...