html+css+js好看的梅花
meihua.html:
leaves.css:
.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) } } #meihua { background: url(images/xbg.png) no-repeat; width: 278px; height: 155px; right: 0; top: 0; position: fixed; z-index: 1; }
leaves.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 } } } }, imgurl: function() { var i = 0, got = -1, len = doc.getElementsByTagName(‘script’).length; while (i <= len && got == -1) { var js_url = doc.getElementsByTagName(‘script’)[i].src, got = js_url.indexOf(‘leaves.js’); i++ } return js_url.replace(‘leaves.js’, ‘images/‘) }, 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 = self.imgurl() + 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);
