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

⑴逻辑分析

⑵实践示例

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

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

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

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

代码示例：

  1. <html>
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  4.     <title>Document</title>
  5.     <style type="text/css">
  6.         *{
  7.             margin: 0;
  8.             padding: 0;
  9.         }
  11.         #container{
  12.             width:800px;
  13.             height:300px;
  14.             margin:100px auto;
  15.             overflow: hidden;
  16.             position: relative;
  17.         }
  19.         #container ul{
  20.             list-style: none;
  21.             width:4000px;
  22.             left:0;
  23.             top:0;
  24.             position: absolute;
  25.             -webkit-animation:scoll 6s linear 0s infinite;
  26.         }
  28.         #container ul li{
  29.             float:left;
  30.             margin-right:20px;
  31.         }
  33.         @-webkit-keyframes scoll{
  34.             from{
  35.                 left:0;
  36.             }
  37.             to{
  38.                 left:-1100px;
  39.             }
  40.         } 
  42.     </style>
  43. </head>
  44. <body>
  45.     <div id="container">
  46.         <ul>
  47.             <li><a href="#"><img src="xz6.jpg" /></a></li>
  48.             <li><a href="#"><img src="xz2.jpg" /></a></li>
  49.             <li><a href="#"><img src="xz3.jpg" /></a></li>
  50.             <li><a href="#"><img src="xz4.jpg" /></a></li>
  51.             <li><a href="#"><img src="xz1.jpg" /></a></li>
  52.             <li><a href="#"><img src="xz6.jpg" /></a></li>
  53.             <li><a href="#"><img src="xz2.jpg" /></a></li>
  54.             <li><a href="#"><img src="xz3.jpg" /></a></li>
  55.             <li><a href="#"><img src="xz4.jpg" /></a></li>
  56.             <li><a href="#"><img src="xz1.jpg" /></a></li>
  57.         </ul>
  58.     </div>
  59. </body>
  60. </html>

效果图：

 

㈡用HTML5+CSS3做文字跳动

思路分析：

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

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

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

代码示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  8.         h2 span{
  9.             float:left;
  10.             position: relative;
  11.         }
  13.         h2 span:nth-child(1){
  14.             -webkit-animation:jump 1s linear 0s infinite alternate;
  15.         }
  17.         h2 span:nth-child(2){
  18.             -webkit-animation:jump 1s linear 0.2s infinite alternate;
  19.         }
  21.         h2 span:nth-child(3){
  22.             -webkit-animation:jump 1s linear 0.4s infinite alternate;
  23.         }
  25.         h2 span:nth-child(4){
  26.             -webkit-animation:jump 1s linear 0.6s infinite alternate;
  27.         }
  29.         h2 span:nth-child(5){
  30.             -webkit-animation:jump 1s linear 0.8s infinite alternate;
  31.         }
  33.         @-webkit-keyframes jump
  34.         {
  35.             0%{
  36.                 top:0px;
  37.                 color:red;
  38.             }
  39.             50%{
  40.                 top:-10px;
  41.                 color:green;
  42.             }
  43.             100%{
  44.                 top:10px;
  45.                 color:blue;
  46.             }
  47.         }
  49.     </style>
  50. </head>
  51. <body>
  52.     <h2>
  53.         <span>石</span>
  54.         <span>海</span>
  55.         <span>莹</span>
  56.         <span>的</span>
  57.         <span>博</span>
  58.         <span>客</span>
  59.     </h2>
  60. </body>
  61. </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. 2019牛客暑期多校训练营（第三场）- H Magic Line (计算几何)

    题目链接:https://ac.nowcoder.com/acm/contest/883/H 题意:给定n个点(n为偶数),求一条直线使得n个点平均分散在直线两端,即每端n/2个点. 思路:把n个点按 ...

  2. oracle数据库表恢复到特定时间点

    某一张表被应用软件里误操作把数据都清空了,现在想恢复到清空之间,比如2013年8月13日14点以前,应该怎样操作? 通过这个问题可以引发一系列的知识点串联. 1.如果开启闪回可以使用闪回表. 怎样查看 ...

  3. json与String的转化

    String转成jsonObject    JsonObject   json = JsonObject.fromObject(String str) String转成JsonArray      J ...

  4. [LGP2000] 拯救世界

    6的倍数 1/(1-x^6) 最多9块 (1-x^10)/(1-x) 最多5块 (1-x^6)/(1-x) 4的倍数 1/(1-x^4) 最多7块 (1-x^8)/(1-x) 2的倍数 1/(1-x^ ...

  5. 谷歌官方颜色库 MaterialDesignColor

    谷歌官方颜色库 MaterialDesignColor

  6. Java NIO浅析 转至 美团技术团队

    出处: Java NIO浅析 NIO(Non-blocking I/O,在Java领域,也称为New I/O),是一种同步非阻塞的I/O模型,也是I/O多路复用的基础,已经被越来越多地应用到大型应用服 ...

  7. Codeforces 1221C. Perfect Team

    传送门 考虑如何保证限制,首先团队数最大就是 $min(c,m)$ 但是还不够,每个团队还要 $3$ 个人,所以还要和 $(c+m+x)/3$ 再取 $min$ 这样就满足所有限制了 #include ...

  8. RPC框架调用过程详解

    RPC框架调用过程详解 2017年09月16日 21:14:08 荷叶清泉 阅读数 6275   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. ...

  9. Echarts饼图将数据显示在 legend 旁边

    不多废话,笔记如下 var myEcharts = echarts.init(document.getElementById('doughnut')); option = { tooltip: { t ...

  10. 102、如何滚动更新 Service （Swarm09）

    参考https://www.cnblogs.com/CloudMan6/p/7988455.html   在前面的实验中,我们部署了多个副本的服务,本节将讨论如何滚动更新每一个副本.   滚动更新降低 ...