HTMl页面加入落叶下雨动画,HTML5和Webkit实现树叶飘落动画
HTML5和Webkit在一起会实现什么样的动画呢?本文给大家分享一段实例代码给大家介绍基于HTML5+Webkit实现树叶飘落动画效果,需要的朋友参考下吧,希望能帮组到大家。
实现如图所示的东西效果(落叶下落):
html代码:
HTML5树叶飘落动画
这是基于webkit的落叶动画
css代码:
body{
background-color: #4E4226;
}
#container {
position: relative;
height: 700px;
width: 500px;
margin: 10px auto;
overflow: hidden;
border: 4px solid #5C090A;
background: #4E4226 url('images/backgroundLeaves.jpg') no-repeat top left;
}
#leafContainer {
position: absolute;
width: 100%;
height: 100%;
}
#message{
position: absolute;
top: 160px;
width: 100%;
height: 300px;
background:transparent url('images/textBackground.png') repeat-x center;
color: #5C090A;
font-size: 220%;
font-family: 'Georgia';
text-align: center;
padding: 20px 10px;
-webkit-box-sizing: border-box;
-webkit-background-size: 100% 100%;
z-index: 1;
}
em {
font-weight: bold;
font-style: normal;
}
#leafContainer > p {
position: absolute;
width: 100px;
height: 100px;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: linear;
}
#leafContainer > p > img {
position: absolute;
width: 100px;
height: 100px;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-transform-origin: 50% -100%;
}
@-webkit-keyframes fade{
0% { opacity: 1; }
95% { opacity: 1; }
100% { opacity: 0; }
}
@-webkit-keyframes drop{
0% { -webkit-transform: translate(0px, -50px); }
100% { -webkit-transform: translate(0px, 650px); }
}
@-webkit-keyframes clockwiseSpin{
0% { -webkit-transform: rotate(-50deg); }
100% { -webkit-transform: rotate(50deg); }
}
@-webkit-keyframes counterclockwiseSpinAndFlip {
0% { -webkit-transform: scale(-1, 1) rotate(50deg); }
100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
}
js代码:
const NUMBER_OF_LEAVES = 30;
function init(){
var container = document.getElementById('leafContainer');
for (var i = 0; i < NUMBER_OF_LEAVES; i++) {
container.appendChild(createALeaf());
}
}
function randomInteger(low, high){
return low + Math.floor(Math.random() * (high - low));
}
function randomFloat(low, high){
return low + Math.random() * (high - low);
}
function pixelValue(value){
return value + 'px';
}
function durationValue(value){
return value + 's';
}
function createALeaf(){
var leafp = document.createElement('p');
leafp.style.top = "-100px";
leafp.style.left = pixelValue(randomInteger(0, 500));
leafp.style.webkitAnimationName = 'fade, drop';
var fadeAndDropDuration = durationValue(randomFloat(5, 11));
leafp.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;
var leafDelay = durationValue(randomFloat(0, 5));
leafp.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;
var image = document.createElement('img');
image.src = 'images/realLeaf' + randomInteger(1, 5) + '.png';
var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';
image.style.webkitAnimationName = spinAnimationName;
var spinDuration = durationValue(randomFloat(4, 8));
image.style.webkitAnimationDuration = spinDuration;
leafp.appendChild(image);
return leafp;
}
window.addEventListener('load', init, false);
PS:下面看下html5 canvas处理连续帧图片,下面的代码基于IE8以上
Canvas Demo
var canvas = null;//初始化参数
var img = null;
var ctx = null;
var imageReady = false;
window.onload = function() {
var canvas = document.getElementById("animation_canvas");
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;
if (!canvas.getContext) {
console.log("Canvas not supported. Please install a HTML5 compatible browser.");
return;
}
// get 2D context of canvas and draw rectangel
ctx = canvas.getContext("2d");
ctx.fillStyle="black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
console.log(canvas.height);
img = document.createElement('img');
img.src = "images/ab0.png";
img.onload = loaded();
}
//保证只有图像加载后才开始循环动画
function loaded() {
imageReady = true;
setTimeout( update, 1000/3);//添加3帧每秒间隔计时器
}
function redraw() {
ctx.fillStyle="black";
ctx.fillRect(0, 0, 460, 460);
ctx.drawImage(img, 0, 0, 232, 180);
}
//为了让图片以规定的速度动画,我们必须追踪已经经过的时间,然后根据分配给每帧的时间播放帧。基本步骤是:
//1、按每秒几帧设置动画速度(msPerFrame)。
//2、当你循环游戏时,计算一下自最后一帧以后已经经过了多少时间(delta)。
//3、如果已经经过的时间足够把动画帧播完,那么播放这一帧并设置累积delta为0。
//4、如果已经经过的时间不够,那么记住(累积)delta时间(acDelta)。
var frame = 0;
var lastUpdateTime = 0;
var acDelta = 0;
var msPerFrame = 200;
function update() {
requestAnimFrame(update);
var delta = Date.now() - lastUpdateTime;
//console.log(Date.now(),lastUpdateTime);
if (acDelta > msPerFrame){
acDelta = 0;
redraw();
img.src='images/ab'+frame+'.png';
frame++;
if(frame >= 3) frame = 0; //当绘制后且帧推进完,计时器就会重置。
}else{
acDelta += delta;
}
lastUpdateTime = Date.now();
}
//requestAnimFrame的作用基本上就是setTimeout,但浏览器知道你正在渲染帧,所以它可以优化绘制循环,以及如何与剩下的页面回流。
//在某些情况下,setTimeout比requestAnimFrame更好用,特别是对于手机。
//以下是在不同的浏览器上调用requestAnimFrame的情况也不同,标准的检测方法如下:
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 3); //如果requestAnimFrame支持不可用,还是可以用回内置的setTimeout。
};
})();
相关推荐:
HTMl页面加入落叶下雨动画,HTML5和Webkit实现树叶飘落动画相关推荐
- html 转图片 wekit实现,HTML5和Webkit实现树叶飘落动画
HTML5和Webkit在一起会实现什么样的动画呢?本文给大家分享一段实例代码给大家介绍基于HTML5 Webkit实现树叶飘落动画效果,需要的朋友参考下吧,希望能帮组到大家. 实现如图所示的东西效果 ...
- HTMl页面加入落叶下雨动画,基于HTML5+Webkit实现树叶飘落动画
实现如图所示的东西效果(落叶下落): html代码: HTML5树叶飘落动画 这是基于webkit的落叶动画 css代码: body{ background-color: #4E4226; } #co ...
- html让页面飘树叶的代码,逼真的HTML5树叶飘落动画
这是一款基于HTML5的树叶飘落动画,树叶都是图片,并非CSS3绘制,但是树叶飘落的动画效果非常逼真.这款HTML5树叶飘落动画是基于webkit内核的,也就是说要在webkit内核的浏览器上才能使用 ...
- android 树叶飘落动画,逼真的HTML5树叶飘落动画
这是一款基于HTML5的树叶飘落动画,树叶都是图片,并非CSS3绘制,但是树叶飘落的动画效果非常逼真.这款HTML5树叶飘落动画是基于webkit内核的,也就是说要在webkit内核的浏览器上才能使用 ...
- HTML5树叶飘落动画
请使用Chrome浏览器查看本效果. html源代码: Html代码 <!DOCTYPE HTML> <html> <head> <title>HT ...
- HTML5实现的树叶飘落动画特效
以下是一个基于HTML5实现的树叶飘落动画特效: <!DOCTYPE html> <html> <head><title>树叶飘落动画特效</ti ...
- HTML5效果:实现树叶飘落
实现如图所示的东西效果(落叶下落): html代码: <!DOCTYPE html> <html> <head> <title>HTML5树叶飘落动画& ...
- python随风飘落怎么画_树叶飘落动画制作 如何制作树叶飘落的动画?视频画面添加树叶随风飘落的动画效果...
最近真是有一点秋的凉意了呢~每天早上起床走出房间的时候,就能感觉到有点凉凉的气息,真好,酷暑终于过去了,希望不要再炎热了,啊哈哈.对于秋天,相信大家先想到的就是那种漫天的落叶了吧~那种秋风阵阵,落叶缤 ...
- ue4树叶飘落动画_Android:使用属性动画制作器的类似于树叶的动画
ue4树叶飘落动画 在上一教程中,我们解释了属性动画通常如何工作. 现在,我们将进一步讲解如何创建属性动画,该动画将为ImageView产生类似于树叶飘落的效果,在其中我们显然将放置树叶的图像. 为此 ...
最新文章
- 手摸手入门前端--01.webpack4
- php python-10分钟从PHP到Python
- 程序出错后,程序员给测试人员的20条高频回复
- 编写高质量代码改善C#程序的157个建议——建议104:用多态代替条件语句
- Castle.ActiveRecord的ProxyFactory配置
- sql每一个join都要加on
- 异步发送,那消息可靠性怎么保证?
- c语言使用未初始化的内存怎么解决_C语言快速入门——数组与调试进阶
- [python opencv 计算机视觉零基础到实战] 七、逻辑运算与应用
- LeetCode 1553. 吃掉 N 个橘子的最少天数(BFS)
- 【转】s3c2440 按键驱动 — 字符设备
- linux统计所有进程总共占用多少内存?
- 用 AI 培养孩子学习兴趣,讯飞新一代智能学习机正式发布!
- YuxuanSys WMS412无线流媒体网关在会议场景中的应用一
- 经纬财富:东莞炒白银怎么做好风险控制
- 李沐动手学深度学习V2-注意力评分函数
- 一个项目的经验教训:关于打乱和拆分数据
- 嵌入式linux华清远见考试,嵌入式Linux小测及答案
- 实现从淘宝定时抓取订单数据、打印电子面单并保存到ERP表中!
- DVWA V1.9:Reflected Cross Site Scripting(存储型XSS)
热门文章
- Spring Boot 项目 - API 文档搜索引擎
- python爬虫毕业论文大纲参考模板_毕业论文大纲(目录)模板
- 登录页面(动态背景)
- 强生单剂新冠疫苗对“德尔塔”有效;赛诺菲巴斯德将每年投资4亿欧元建mRNA疫苗中心 | 美通社头条...
- matlab编写多目标性能度量r、GD、Spacing、德尔塔
- 26进制(A到Z表示1到26,例27:AA,2019:BYQ)
- u-boot 自定义命令
- 2020年汽车驾驶员(初级)考试平台及汽车驾驶员(初级)模拟考试软件
- “独立站+私域”的DTC直客模式电商,是告别互联网内卷唯一有效方式
- matlab吃cpu还是显卡_如何配置一台适合跑MATLAB的电脑