js 梅花飘落网页背景

以前本博客使用的一个js动态背景，现在精简掉了，收藏在这里备用。

查看效果

css部分

body{
background: url(https://pdbn.top/uploads/2016/02/bg.png) no-repeat top right fixed;
}
/* 梅花飘落 ------------------------------------------------ */
.leave {
 position: fixed;
 width: 25px;
 height: 20px;
 -webkit-animation-iteration-count: infinite,infinite;
 -webkit-animation-direction: normal,normal;
 -webkit-animation-timing-function: linear,ease-in;
 -moz-animation-iteration-count: infinite,infinite;
 -moz-animation-direction: normal,normal;
 -moz-animation-timing-function: linear,ease-in;
 -o-animation-iteration-count: infinite,infinite;
 -o-animation-direction: normal,normal;
 -o-animation-timing-function: linear,ease-in;
 animation-iteration-count: infinite,infinite;
 animation-direction: normal,normal;
 animation-timing-function: linear,ease-in;
}

.leave>img {
 position: fixed;
 width: 25px;
 height: 20px;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-transform-origin: 50% -100%;
 -moz-animation-iteration-count: infinite;
 -moz-animation-direction: alternate;
 -moz-animation-timing-function: ease-in-out;
 -moz-transform-origin: 50% -100%;
 -o-animation-iteration-count: infinite;
 -o-animation-direction: alternate;
 -o-animation-timing-function: ease-in-out;
 -o-transform-origin: 50% -100%;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-timing-function: ease-in-out;
 transform-origin: 50% -100%;
}

@-webkit-keyframes fade {
 0% {
 opacity: 1
 }
 95% {
 opacity: 1
 }
 100% {
 opacity: 0
 }
}

@-webkit-keyframes drop {
 0% {
 -webkit-transform: translate(30px,-50px)
 }
 100% {
 -webkit-transform: translate(-200px,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)
 }
}

@-moz-keyframes fade {
 0% {
 opacity: 1
 }
 95% {
 opacity: 1
 }
 100% {
 opacity: 0
 }
}

@-moz-keyframes drop {
 0% {
 -moz-transform: translate(30px,-50px)
 }
 100% {
 -moz-transform: translate(-200px,650px)
 }
}

@-moz-keyframes clockwiseSpin {
 0% {
 -moz-transform: rotate(-50deg)
 }
 100% {
 -moz-transform: rotate(50deg)
 }
}

@-moz-keyframes counterclockwiseSpinAndFlip {
 0% {
 -moz-transform: scale(-1,1) rotate(50deg)
 }
 100% {
 -moz-transform: scale(-1,1) rotate(-50deg)
 }
}

@-o-keyframes fade {
 0% {
 opacity: 1
 }
 95% {
 opacity: 1
 }
 100% {
 opacity: 0
 }
}

@-o-keyframes drop {
 0% {
 -o-transform: translate(30px,-50px)
 }
 100% {
 -o-transform: translate(-200px,650px)
 }
}

@-o-keyframes clockwiseSpin {
 0% {
 -o-transform: rotate(-50deg)
 }
 100% {
 -o-transform: rotate(50deg)
 }
}

@-o-keyframes counterclockwiseSpinAndFlip {
 0% {
 -o-transform: scale(-1,1) rotate(50deg)
 }
 100% {
 -o-transform: scale(-1,1) rotate(-50deg)
 }
}

@keyframes fade {
 0% {
 opacity: 1
 }
 95% {
 opacity: 1
 }
 100% {
 opacity: 0
 }
}

@keyframes drop {
 0% {
 transform: translate(30px,-50px)
 }
 100% {
 transform: translate(-200px,650px)
 }
}

@keyframes clockwiseSpin {
 0% {
 transform: rotate(-50deg)
 }
 100% {
 transform: rotate(50deg)
 }
}

@keyframes counterclockwiseSpinAndFlip {
 0% {
 transform: scale(-1,1) rotate(50deg)
 }
 100% {
 transform: scale(-1,1) rotate(-50deg)
 }
}
/* 梅花飘落结束------------------------------------------------ */

js部分

/* 梅花飘落js*/
~(function(doc) {
 var FallingLeaves = function(num, id) {
 this.body = doc.body;
 this.support = false;
 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 = 'https://pdbn.top/wp-content/themes/822/img/' + 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);

注意js中加粗的部分，定义4张图片