html+css+js好看的梅花

html+css+js好看的梅花

meihua.html:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>CSS3+JS梅花飘落 - 何问起</title>
    <!--<base target="_blank">-->
    <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