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 jsurl = doc.getElementsByTagName('script')[i].src,
- got = jsurl.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);
查看示例
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: http://www.92to.com/bangong/2017/03-02/17949087.html