梅花飘落

最新推荐文章于 2021-06-07 14:21:02 发布

一梦醉殇

最新推荐文章于 2021-06-07 14:21:02 发布

阅读量458

点赞数

分类专栏： js特效

js特效专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>梅花飘落</title>
<style type="text/css">
body {
   position: relative;
   overflow-x: hidden;
   background:#fff url(http://sandbox.runjs.cn/uploads/rs/475/ao7egt7f/bg.png) no-repeat top right;
}

.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)
   }
}
</style>
</head>
<body>

<script type="text/javascript">
   /**
* Leaves v0.2
* By mufeng, http://mufeng.me, http://weibo.com/meapo, 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.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://sandbox.runjs.cn/uploads/rs/475/ao7egt7f/" + 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);
</script>
</body>
</html>

一梦醉殇

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
梅花飘落

梅花飘落body { position: relative; overflow-x: hidden; background:#fff url(http://sandbox.runjs.cn/uploads/rs/475/ao7egt7f/bg.png) no-repeat top right;}.leave { position: fix
复制链接

扫一扫

专栏目录