html+css+js好看的梅花

来源：互联网发布：华尔街英语软件课程编辑：程序博客网时间：2024/04/30 21:31

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

0 0