太阳的发散效果主要是利用transform: scale(1.3)，将物体变大

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.  
  12.         html, body {
  13.             width: 100%;
  14.             height: 100%;
  15.             background-color: lightseagreen;
  16.             overflow: hidden;
  17.         }
  18.  
  19.         .sun {
  20.             width: 80px;
  21.             height: 80px;
  22.             position: absolute;
  23.             top: 45px;
  24.             left: 67px;
  25.             background-color: #fff;
  26.             border-radius: 50%;
  27.         }
  28.  
  29.         .sun1, .sun2 {
  30.             position: absolute;
  31.             top: 0;
  32.             left: 0;
  33.             width: 80px;
  34.             height: 80px;
  35.             background-color: #fff;
  36.             border-radius: 50%;
  37.         }
  38.  
  39.         .sun1 {
  40.             animation: bigger 1s infinite alternate;
  41.         }
  42.  
  43.         .sun2 {
  44.             animation: bigger 1s infinite 0.5s alternate;
  45.         }
  46.  
  47.         .bottom {
  48.             width: 100%;
  49.             height: 235px;
  50.             position: absolute;
  51.             bottom: 0;
  52.             left: 0;
  53.         }
  54.  
  55.         .bottom1, .bottom2 {
  56.             width: 100%;
  57.             position: absolute;
  58.             left: 0;
  59.             bottom: 0;
  60.             opacity: 0.5;
  61.         }
  62.  
  63.         .bottom1 {
  64.             height: 211px;
  65.             background: url("images/bolang1.png");
  66.             background-size: cover;
  67.             animation: upDown 1s infinite alternate;
  68.         }
  69.  
  70.         .bottom2 {
  71.             height: 235px;
  72.             background: url("images/bolang2.png");
  73.             background-size: cover;
  74.             animation: upDown 1s infinite alternate 0.5s;
  75.         }
  76.  
  77.         @keyframes bigger {
  78.             0% {
  79.                 opacity: 1;
  80.                 transform: scale(1);
  81.             }
  82.             100% {
  83.                 opacity: 0.3;
  84.                 transform: scale(1.3);
  85.             }
  86.         }
  87.  
  88.         @keyframes upDown {
  89.             0% {
  90.                 bottom: 0px;
  91.             }
  92.  
  93.             100% {
  94.                 bottom: -20px;
  95.             }
  96.         }
  97.  
  98.     </style>
  99. </head>
  100. <body>
  101. <div class="sun">
  102.     <div class="sun1"></div>
  103.     <div class="sun2"></div>
  104. </div>
  105. <div class="bottom">
  106.     <div class="bottom1"></div>
  107.     <div class="bottom2"></div>
  108. </div>
  109. </body>
  110. </html>

html5——动画案例（大海）的更多相关文章

  1. html5——动画案例（时钟）

    1.秒钟转360度需要60s分60步 2.分针转360度需要3600s分60步 3.秒钟转360度需要43200s分60步 <!DOCTYPE html> <html lang=&q ...

  2. html5——动画案例（无缝滚动）

    无缝滚动:是两组拼在一起的 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  3. html5——动画案例（太阳系）

    太阳系主要利用定位,伪元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  4. 精选19款华丽的HTML5动画和实用案例

    下面是本人收集的19款超酷HTML5动画和实用案例,觉得不错,分享给大家. 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天 ...

  5. HTML5 动画效果的多种实现方式

    HTML5 动画效果的多种实现方式 1.  CSS3 transform + transition https://www.w3.org/TR/css-transforms-1/ https://ww ...

  6. 给你推荐10款优秀的 HTML5 动画工具

    HTML5 在过去三年快速增长,已经成为 Web 开发人员最喜欢的编程语言之一.强大的编程语言拥有开发更好的网页应用的能力. HTML5 中引入的新技术都非常好,像 Chrome.Firefox.Sa ...

  7. HTML5 Maker – 在线轻松制作 HTML5 动画效果

    HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...

  8. HTML5动画软件工具编辑器 HTML5动画分类 工具推荐

    接下来介绍几款制作HTML5动画的工具,它们可以分为几类: 1.导出canvas动画: Flash CC(13.1).Animation.Radi 2.导出DIV+CSS3动画: HTML5 Make ...

  9. 精妙无比 8款HTML5动画实例及源码

    1.jQuery垂直带小图标菜单导航插件 今天我们要来分享一款jQuery菜单插件,这款jQuery菜单是垂直的样式,鼠标滑过菜单项时会出现一个背景,菜单项的右侧也会出现一个小箭头.另外值得注意的是, ...

随机推荐

  1. Mybatis错误——Could not find parameter map java.util.Map

    错误信息 org.apache.ibatis.builder.IncompleteElementException: Could not find parameter map java.util.Ma ...

  2. ORA_ROWSCN

    这是一个非常重要的特性.从oracle10g开始,oracle在表上引入了一个伪列ORA_ROWSCN.该列记录了每一列最后更改的SCN.但是有两种模式,一种是默认的是data block级别,另一种 ...

  3. poj 3090 &amp;&amp; poj 2478（法雷级数，欧拉函数）

    http://poj.org/problem?id=3090 法雷级数 法雷级数的递推公式非常easy:f[1] = 2; f[i] = f[i-1]+phi[i]. 该题是法雷级数的变形吧,答案是2 ...

  4. 数据结构之中序遍历转兴许遍历（JAVA实现）（二）

    算法流程: 主要分为四步: 1.当前字符为数字或者字母,则直接输出 2.当前字符为).则在栈中匹配输出.一直匹配到),则停止输出(就是将)及其顶上的元素所有弹出来输出) 3.当前字符为操作符.则比較当 ...

  5. Android首次启动时间长优化之预编译提取Odex

        提示!应用程序的安装有两种情况,第一:首次启动系统时安装.第二:系统启动完毕后安装. 本篇博文基于第一种安装场景.在系统首次启动的场景中,系统会对/system/app./system/pri ...

  6. Android 应用按返回键异常退出的问题

    开发过程中遇到按返回键异常退出的问题,log显示为空指针异常,进一步产看是由于onActivityResult得到的Intent为空. 按返回键复写代码例如以下: @Override public v ...

  7. 【翻译自mos文章】将expdp的dmp文件从asm磁盘组里边放到本地文件系统里边

    将expdp的dmp文件从asm磁盘组里边放到本地文件系统里边 參考原文: How To Extract Datapump File From ASM Diskgroup To Local Files ...

  8. shell学习三十七天----引用

    引用 案例,假设我想输出一个星号(*),使用echo怎样做? echo * 这是肯定不行的,须要将*转移,即:echo \* 这样就引出了引用的概念.所为引用,是用来防止shell将某些你想要的东西解 ...

  9. Localhost 回环IP 127.0.0.1

    LocalHost 127.0.0.1是一个保留地址,用于本地软件測试以及本地进程间通信, 也叫回环IP.回环地址.回送地址(loopback address).不管什么程序,一旦使 用回环IP发送数 ...

  10. bzoj2243【SDOI2011】染色

    2243: [SDOI2011]染色 Time Limit: 20 Sec  Memory Limit: 512 MB Submit: 4537  Solved: 1702 [id=2243" ...