html+css+js好看的梅花

meihua.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>CSS3+JS梅花飘落 - 何问起</title>

<base href="." target="_blank">
<link href="./files/leaves.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="hewenqi">
<div class="pauseHovertree hovertreerun"> </div>
</div>
<script src="./files/hovertreemeihua.js"></script>

<div class="leave" style="top: 30px; right: 33px; animation-name: fade, drop; animation-delay: 0.385104s, 0.385104s; animation-duration: 8.67578s, 8.67578s;">
<img src="./files/2.png" style="animation-name: clockwiseSpin; animation-duration: 4.83808s;">
</div>
<div class="leave" style="top: 30px; right: 46px; animation-name: fade, drop; animation-delay: 3.37827s, 3.37827s; animation-duration: 5.03104s, 5.03104s;">
<img src="./files/3.png" style="animation-name: counterclockwiseSpinAndFlip; animation-duration: 6.23133s;">
</div>
<div class="leave" style="top: 30px; right: 27px; animation-name: fade, drop; animation-delay: 4.86905s, 4.86905s; animation-duration: 7.2992s, 7.2992s;">
<img src="./files/3.png" style="animation-name: clockwiseSpin; animation-duration: 4.91787s;">
</div>
<div class="leave" style="top: 30px; right: 25px; animation-name: fade, drop; animation-delay: 4.17076s, 4.17076s; animation-duration: 8.57357s, 8.57357s;">
<img src="./files/1.png" style="animation-name: clockwiseSpin; animation-duration: 6.10835s;">
</div>
<div class="leave" style="top: 30px; right: 17px; animation-name: fade, drop; animation-delay: 1.51625s, 1.51625s; animation-duration: 7.73051s, 7.73051s;">
<img src="./files/2.png" style="animation-name: counterclockwiseSpinAndFlip; animation-duration: 7.16054s;">
</div>
</body>

</html>

leaves.css:

/**
* Leaves v0.2
* By HoverTree, http://hovertree.com, http://weibo.com/hovertree, 2012/12/15
*/
~(function(doc) {
var FallingLeaves = function(num, id) {
this.body = doc.body;
this.support = false;

this.container = id ? doc.getElementById(id) : this.body;
// this.container = id ? doc.getElementById('id') : this.body;
this.num = num ? num : 5;
this.init()
};
FallingLeaves.prototype = {
init: function() {
this.supportNot();
if (this.support != false) {
for (var i = 0; i < this.num; i++) {
this.container.appendChild(this.createLeaf())
}
}
},
supportNot: function() {
var domPrefixes = 'Webkit Moz O ms a'.split(' ');
for (var i = 0; i < domPrefixes.length; i++) {
if (this.container.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
this.support = domPrefixes[i];
break
}
if (domPrefixes[i] == "a") {
if (this.container.style.animationName !== undefined) {
this.support = domPrefixes[i];
break
}
}
}
},
randomInteger: function(low, high) {
return low + Math.floor(Math.random() * (high - low))
},
randomFloat: function(low, high) {
return low + Math.random() * (high - low)
},
pixelValue: function(value) {
return value + 'px'
},
durationValue: function(value) {
return value + 's'
},
createLeaf: function() {
var self = this,
leafDiv = doc.createElement('div'),
      image = doc.createElement('img'),
         spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip',
      fadeAndDropDuration = self.durationValue(self.randomFloat(5, 11)),
      spinDuration = self.durationValue(self.randomFloat(4, 8)),
      leafDelay = self.durationValue(self.randomFloat(0, 5));

leafDiv.className = "leave";
image.src = "http://hover"+"tree.com/texiao/js/22/htimg/" + self.randomInteger(1, self.num) + '.png';
leafDiv.style.top = self.pixelValue(30);
leafDiv.style.right = self.pixelValue(self.randomInteger(0, 50));

if (self.container.style[self.support + 'AnimationName'] !== undefined) {
image.style[self.support + 'AnimationName'] = spinAnimationName;
image.style[self.support + 'AnimationDuration'] = spinDuration;
leafDiv.style[self.support + 'AnimationName'] = 'fade, drop';
leafDiv.style[self.support + 'AnimationDelay'] = leafDelay + ', ' + leafDelay;
leafDiv.style[self.support + 'AnimationDuration'] = fadeAndDropDuration + ', ' + fadeAndDropDuration
}
if (this.support == "a") {
image.style.animationName = spinAnimationName;
image.style.animationDuration = spinDuration;
leafDiv.style.animationName = 'fade, drop';
leafDiv.style.animationDelay = leafDelay + ', ' + leafDelay;
leafDiv.style.animationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration
}
leafDiv.appendChild(image);
return leafDiv
}
};
new FallingLeaves();
})(document);

1.png

2.png

3.png

html+css+js好看的梅花相关推荐

html css好看的提示框,div对话框,js+div+css实现好看的提示框效果(转)
div对话框,js+div+css实现好看的提示框效果(转) (2012-02-18 20:46:23) 标签: html div css 杂谈提示窗都越来越人性化了,呵呵,有的时候老板就和你要那么 ...
HTML+CSS+JS做一个好看的个人网页—web网页设计作业
个人网页设计个人网页(html+css+js)--网页设计作业带背景音乐(The way I still Love you).樱花飘落效果.粒子飘落效果页面美观,样式精美涉及(html+css ...
用html+css+js实现一个无限级树形控件
题目描述: 用html+css+js实现一个无限级树形控件,功能如下: 1.利用html.css展示一个树形菜单 2.点击箭头图标展开子项 3.点击父节点勾选图标能全选或全取消,点击叶节点勾选图标可以 ...
有趣的HTML实例（七）注册登录界面Ⅱ（css+js）
你知道,有些鸟儿是注定不会被关在牢笼里的,它们的每一片羽毛都闪耀着自由的光辉. --<肖申克的救赎> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编 ...
有趣的HTML实例（十五）注册登录界面（css+js）
我并不是每次吃完饭就看电视,有时我边吃边看电视,生活中有些改变会增加乐趣. --<加菲猫> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编码实现 i ...
html+css+js 实现图片轮播效果
html+css+js 实现图片轮播效果图片轮播效果: 会自动向左 || 向右切换图片能手动点击按钮切换图片多用于商品展览等等 --首先我们创建一个盒子进行展览,然后一个< ul> ...
html+css+js实现文本编辑器
html+css+js实现文本编辑器简介:本文讲解,如何制作使用html+css+js实现一个好看的文本编辑器. 效果展示当文本框聚焦的时候,就是显示textarea,然后是可编辑的,这个时候可以 ...
html与css游戏开发工具,html/css/js开发者必备的10款最佳工具
Topcoat是一个简洁干净的CSS类库,其专门用于表单元素,如按钮.复选框.滑块等.只需几分钟,就可以设计出一个完美的网站或应用程序. 正如你所猜测,Countable.js是一个JavaScrip ...
原生HTML+CSS+JS制作自己的导航主页（前端大作业，源码+步骤详解）
文章目录前言一.插入背景二.头部 1.导航栏 2. 优化导航栏 3 时间 4. 搜索框三.主体四.底部五.背景泡沫球特效六.note小便签七.全部代码 1. index.html 2. ...

html+css+js好看的梅花

html+css+js好看的梅花

html+css+js好看的梅花相关推荐

最新文章

热门文章