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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        html, body {

            width: 100%;

            height: 100%;

            background-color: lightseagreen;

            overflow: hidden;

        }

        .sun {

            width: 80px;

            height: 80px;

            position: absolute;

            top: 45px;

            left: 67px;

            background-color: #fff;

            border-radius: 50%;

        }

        .sun1, .sun2 {

            position: absolute;

            top: 0;

            left: 0;

            width: 80px;

            height: 80px;

            background-color: #fff;

            border-radius: 50%;

        }

        .sun1 {

            animation: bigger 1s infinite alternate;

        }

        .sun2 {

            animation: bigger 1s infinite 0.5s alternate;

        }

        .bottom {

            width: 100%;

            height: 235px;

            position: absolute;

            bottom: 0;

            left: 0;

        }

        .bottom1, .bottom2 {

            width: 100%;

            position: absolute;

            left: 0;

            bottom: 0;

            opacity: 0.5;

        }

        .bottom1 {

            height: 211px;

            background: url("images/bolang1.png");

            background-size: cover;

            animation: upDown 1s infinite alternate;

        }

        .bottom2 {

            height: 235px;

            background: url("images/bolang2.png");

            background-size: cover;

            animation: upDown 1s infinite alternate 0.5s;

        }

        @keyframes bigger {

            0% {

                opacity: 1;

                transform: scale(1);

            }

            100% {

                opacity: 0.3;

                transform: scale(1.3);

            }

        }

        @keyframes upDown {

            0% {

                bottom: 0px;

            }

            100% {

                bottom: -20px;

            }

        }

    </style>

</head>

<body>

<div class="sun">

    <div class="sun1"></div>

    <div class="sun2"></div>

</div>

<div class="bottom">

    <div class="bottom1"></div>

    <div class="bottom2"></div>

</div>

</body>

</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. 关于 Neo4j 属性个数的限制

    关于 Neo4j 属性个数的限制 目前累积统计它有34.4亿个节点,344亿的关系,和6870亿条属性. 社区版,Neo4j对 数据库内 节点.关系 上的属性名个数是有限制的.数据库中至多存在687亿 ...

  2. 实例：Mongodb集群配置过程

    最近因为一些项目公司开始采用Mongodb做为大量的数据存储,通过网络上大量的资源自己已经掌握一套可行的Mongodb集群配置过程,Mongodb具有无规则存储.大数据存储.多平台支持.强大的扩展插件 ...

  3. 玩一玩MEAN

    参考的书如下: Manning.Getting.MEAN.with.Mongo.Express.Angular.and.Node. 开始再次了解.

  4. Memcached启动提示：cann't run as root without the -u switch

    如果没有带 -u root 的话就会报: can't run as root without the -u switch 解决方法: 带-u root就行了. 出现的原因: 1.可能在root用户下启 ...

  5. MAPZONE GIS SDK接入Openlayers3之三——瓦片数据集接入

    瓦片数据集接入实现思路: 1.构造ol.source.TileImage数据源,构造该数据源需要以下几项: 1)空间参考,通过如下代码构造 2)TileGrid,构造需要以下几项: a)原点 b)分辨 ...

  6. RMAN RECOVERY

    Data Recovery Advisor The health monitor and the ADR The capabilities and limitations of DRA using t ...

  7. C# Json反序列化 C# 实现表单的自动化测试<通过程序控制一个网页> 验证码处理类：UnCodebase.cs + BauDuAi 读取验证码的值(并非好的解决方案) 大话设计模式：原型模式 C# 深浅复制 MemberwiseClone

    C# Json反序列化   Json反序列化有两种方式[本人],一种是生成实体的,方便处理大量数据,复杂度稍高,一种是用匿名类写,方便读取数据,较为简单. 使用了Newtonsoft.Json,可以自 ...

  8. 【bzoj1821】[JSOI2010]Group 部落划分 Group

    题目大意:要求把n个点分成m块,使得每一块之间的距离的最小值最大 n^2枚举所有点之间距离 然后sort一下 并查集维护连通关系 一开始e[]开MAXN然后WA了测了4ms,然后开MAXN<&l ...

  9. luogu2679 子串

    题目大意 有两个仅包含小写英文字母的字符串 A 和 B.现在要从字符串 A 中取出 k 个互不重叠的非空子串,然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来得到一 个新的字符串,请问 ...

  10. luogu3959 宝藏 搜索+剪枝

    题目大意 参与考古挖掘的小明得到了一份藏宝图,藏宝图上标出了 n 个深埋在地下的宝藏屋, 也给出了这 n 个宝藏屋之间可供开发的 m 条道路和它们的长度. 小明决心亲自前往挖掘所有宝藏屋中的宝藏.但是 ...