好看的心形摆动效果

valentine's day, 看到一个好看的心形摆动效果，效果如下：

 

 

HTML代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>情人节摆动心形</title>
 6         <link rel="stylesheet" href="css/style.css" />
 7     </head>
 8     <body>
 9         <div id="valentine" style="display: block;">
10         <div class="shake">
11             <div class="rope" style="height: 180px;"></div>
12             <div class="heart-wrap" style="top: 120px;">
13                 <img src="img/heart.png" class="heart">
14                 <img src="img/beat.png" class="beat">
15             </div>
16         </div>
17         <div class="tiny"></div>   
18     <script src="js/jquery.js"></script>
19     <script src="js/tinyHeart.js"></script>
20     </body>
21 </html>

 CSS代码：

#valentine,#valentine .shake {
    height:0;
    top:0;
    position:absolute
}
#valentine {
    display:none;
    z-index:100;
    width:600px;
    left:130px;
    left:145px\9;
    *left:145px;
    _left:145px
}
@keyframes shake {
    from {
        transform:rotate(15deg)
    }
    to {
        transform:rotate(-15deg)
    }
}
#valentine .shake {
    width:240px;
    z-index:20;
    left:180px;
    animation-name:shake;
    animation-duration:2.5s;
    animation-iteration-count:infinite;
    animation-timing-function:cubic-bezier(.6,0,.3,1);
    animation-direction:alternate;
    transform-origin:top center
}
#valentine .shake .rope {
    position:absolute;
    width:2px;
    left:105px;
    top:-10px;
    background-color:#FF2128
}
#valentine .shake .heart-wrap {
    position:absolute;
    width:235px;
    height:225px
}
#valentine .heart-wrap .heart {
    display:block;
    position:relative;
    width:235px;
    height:225px
}
@keyframes beat {
    0% {
        transform:scale(0);
        opacity:1
    }
    40% {
        opacity:.8
    }
    80% {
        transform:scale(1);
        opacity:.5
    }
    100% {
        transform:scale(1);
        opacity:0
    }
}
#valentine .heart-wrap .beat {
    position:absolute;
    top:25px;
    left:130px;
    animation-name:beat;
    animation-duration:1.6s;
    animation-iteration-count:infinite;
    animation-timing-function:ease-out;
    transform-origin:bottom center
}
#valentine .tiny {
    position:relative;
    width:0;
    height:0;
    top:0;
    left:300px;
    z-index:1
}
#valentine .tiny img {
    position:absolute
}

jquery.js：此效果使用的是v1.10.2

tinyHeart.js:

function TinyHeart(t, e, s) {
    this.container = s, this.init(t, e)
}
var px = function(t) {
        return t ? Math.floor(t) + "px" : 0
    },
    getRadian = function(t) {
        var e = window.getComputedStyle(t),
            s = e.getPropertyValue("transform");
        if (!s.match("matrix")) return 0;
        var a = s.match(/-?0(\.[0-9]*[1-9])?/gi).map(function(t) {
            return parseFloat(t, 10)
        });
        return -Math.asin(a[1])
    },
    random = function(t, e) {
        return t && "number" == typeof t.length ? t[Math.floor(Math.random() * t.length)] : ("number" != typeof e && (e = t || 1, t = 0), t + Math.random() * (e - t))
    };
TinyHeart.STYLES = ["t01dc2e861029c8a8ca", "t016cc24a48997d651a", "t01dd2a63c80cbdbc30"], TinyHeart.prototype = {
    init: function(t, e) {
        this.alive = !0, this.scale = random(.3, .7), this.opacity = random(50, 70) / 100, this.style = random(TinyHeart.STYLES);
        var s = random(2 * Math.PI);
        this.x = t + 80 * Math.sin(s) - 48 * this.scale / 2, this.y = e + 80 * Math.cos(s) - 42 * this.scale / 2, this.theta = random(2 * Math.PI), this.drag = random(.9, .99), this.wander = random(.5, 2), this.force = random(.1, .4), this.vx = Math.sin(this.theta) * this.force, this.vy = Math.cos(this.theta) * this.force, this.draw()
    },
    move: function() {
        this.x += this.vx, this.y += this.vy, this.vx *= this.drag, this.vy *= this.drag, this.theta += random(-.5, .5) * this.wander, this.vx += .1 * Math.sin(this.theta), this.vy += .1 * Math.cos(this.theta), this.scale *= .995, this.opacity *= .96, this.alive = this.opacity > .1, this.draw()
    },
    draw: function() {
        var t = this.img;
        t || (t = document.createElement("img"), t.src = "img/" + this.style + ".png", this.container.appendChild(t), this.img = t), t.style.left = px(this.x), t.style.top = px(this.y), t.style.width = px(48 * this.scale), t.style.height = px(42 * this.scale), t.style.opacity = this.opacity
    },
    destory: function() {
        this.img && this.container.removeChild(this.img)
    }
};
var shakes = {
    MAX_PARTICLES: 500,
    pool: [],
    start: function(t, e, s) {
        shakes.ropeH = t, shakes.container = e, shakes.timer = setInterval(function() {
            shakes.spawn(getRadian(s)), shakes.update()
        }, 50)
    },
    spawn: function(t) {
        if (!(shakes.pool.length >= shakes.MAX_PARTICLES)) {
            var e = Math.sin(t) * (shakes.ropeH + 40),
                s = Math.cos(t) * (shakes.ropeH + 40) + 20;
            heart = new TinyHeart(e, s, shakes.container), shakes.pool.push(heart)
        }
    },
    update: function() {
        var t, e;
        for (t = shakes.pool.length - 1; t >= 0; t--) e = shakes.pool[t], e.alive ? e.move() : (e.destory(), shakes.pool.splice(t, 1))
    },
    stop: function() {
        clearInterval(shakes.timer), shakes.pool.forEach(function(t) {
            t.destory()
        }), shakes.pool = []
    }
},
    init = function() {
        
        var t = 180,
            e = document.querySelector("#valentine"),
            s = e.querySelector(".tiny"),
            a = e.querySelector(".shake"),
            i = function() {
                e.querySelector(".close").addEventListener("click", function() {
                    shakes.stop(), e.style.display = "none"
                })
            };
            
        shakes.start(t, s, a), a.querySelector(".rope").style.height = t + "px", a.querySelector(".heart-wrap").style.top = t - 60 + "px", e.style.display = "block", i()
    };
init();

 

posted @ 2017-02-16 14:06  澜沐清  阅读(171)  评论(0)    收藏  举报