html5——动画案例（大海）
太阳的发散效果主要是利用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——动画案例（大海）的更多相关文章
- html5——动画案例（时钟）
1.秒钟转360度需要60s分60步 2.分针转360度需要3600s分60步 3.秒钟转360度需要43200s分60步 <!DOCTYPE html> <html lang=&q ...
- html5——动画案例（无缝滚动）
无缝滚动:是两组拼在一起的 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- html5——动画案例（太阳系）
太阳系主要利用定位,伪元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 精选19款华丽的HTML5动画和实用案例
下面是本人收集的19款超酷HTML5动画和实用案例,觉得不错,分享给大家. 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天 ...
- HTML5 动画效果的多种实现方式
HTML5 动画效果的多种实现方式 1. CSS3 transform + transition https://www.w3.org/TR/css-transforms-1/ https://ww ...
- 给你推荐10款优秀的 HTML5 动画工具
HTML5 在过去三年快速增长,已经成为 Web 开发人员最喜欢的编程语言之一.强大的编程语言拥有开发更好的网页应用的能力. HTML5 中引入的新技术都非常好,像 Chrome.Firefox.Sa ...
- HTML5 Maker – 在线轻松制作 HTML5 动画效果
HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...
- HTML5动画软件工具编辑器 HTML5动画分类 工具推荐
接下来介绍几款制作HTML5动画的工具,它们可以分为几类: 1.导出canvas动画: Flash CC(13.1).Animation.Radi 2.导出DIV+CSS3动画: HTML5 Make ...
- 精妙无比 8款HTML5动画实例及源码
1.jQuery垂直带小图标菜单导航插件 今天我们要来分享一款jQuery菜单插件,这款jQuery菜单是垂直的样式,鼠标滑过菜单项时会出现一个背景,菜单项的右侧也会出现一个小箭头.另外值得注意的是, ...
随机推荐
- M - 小希的迷宫 并查集
上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该是双向连通的,就是说如果有一个通道连通了 ...
- some notes about ADDM and AWR
Use the sophisticated management and monitoring features of the Oracle DatabaseDiagnostic and Tuning ...
- 【转】java中Thread类方法介绍
原文: java中Thread类方法介绍 http://blog.csdn.net/seapeak007/article/details/53395609 这篇文章找时间分析一下!!!:http:// ...
- 交换机是干嘛的！！交换机如何学习MAC地址过程？
1.它收到一个帧的时候,先检查源MAC地址,看看自己维护的一个地址表中有没有这个地址.如果有,则2:如果没有,则将这个MAC地址.进入的端口.进入的时间放入这个表中: 2.检查目的MAC地址,然后到该 ...
- Swift之闭包
swift中闭包是一个非常强大的东西,闭包是自包括的函数代码块,能够在代码中被传递和使用.跟C 和 Objective-C 中的代码块(blocks)非常相似 .这个大家必须掌握!必须掌握! 必须掌握 ...
- 最老程序猿创业开发实训1---Android应用架构之MVC
我们都知道Android中基本组件是Activity,每一个界面都是一个Activity,自从2.3版本号開始.又添加了Fragment组件,提供了适应于各种屏幕方法.可是因为Android系统仅仅是 ...
- 跟我一起写Makefile:概述
什么是makefile?也许非常多Winodws的程序猿都不知道这个东西.由于那些Windows的集成开发环境(integrateddevelopment environment,IDE)都为你做了这 ...
- 谈谈c++纯虚函数的意义！
纯虚函数的存在有什么意义呢?相信大学假设有c++这么课程.在讲到纯虚函数时,必然会讲到纯虚函数是面向接口编程的基础. 如今和大家分享下纯虚函数设计的原由.目的.产生的效果. 现代软件project很庞 ...
- 【POJ 2777】 Count Color
[题目链接] http://poj.org/problem?id=2777 [算法] 线段树 [代码] #include <algorithm> #include <bitset&g ...
- IDEA 中Spark SQL通过JDBC连接mysql数据库
一.IDEA装驱动: 1.下载一个MySQL的JDBC驱动:mysql-connector-java-5.1.44.tar.gz2.在idea Open Moudle Settings 在 Moudl ...