标签：function heart 查漏 45deg transform window radius border

问题

如题所示

答案

相关源码：

!function (e, t, a) {
    function n() {
        c(
            "
                .heart{
                    width: 10px;
                    height: 10px;
                    position: fixed;
                    background: #f00;
                    transform: rotate(45deg);
                    - webkit - transform: rotate(45deg);
                    -moz - transform: rotate(45deg);
                }
                .heart: after,.heart:before{
                    content: '';
                    width: inherit;
                    height: inherit;
                    background: inherit;
                    border - radius: 50 %;
                    -webkit - border - radius: 50 %;
                    -moz - border - radius: 50 %;
                    position: fixed;
                }
                .heart:after{ top: -5px; }
                .heart:before{ left: -5px; } "
        ), o(), r()
    }
    function r() {
        for (var e = 0; e < d.length; e++)
            d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : 
            (
                d[e].y--, d[e].scale += .004, 
                d[e].alpha -= .013, 
                d[e].el.style.cssText = "
                left:" + d[e].x + "px;
                top:" + d[e].y + "px;
                opacity:" + d[e].alpha + ";
                transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);
                background:" + d[e].color + ";
                z-index:99999"
            ); 
            requestAnimationFrame(r)
    }
    function o() {
        var t = "function" == typeof e.onclick && e.onclick; 
        e.onclick = function (e) { 
            t && t(), i(e) 
        }
    }
    function i(e) {
        var a = t.createElement("div");
        a.className = "heart",
        d.push({ 
            el: a, 
            x: e.clientX - 5, 
            y: e.clientY - 5, 
            scale: 1, 
            alpha: 1, 
            color: s() 
        }),
        t.body.appendChild(a)
    }
    function c(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        }
        catch (t) {
            a.styleSheet.cssText = e
        } 
        t.getElementsByTagName("head")[0].appendChild(a)
    }
    function s() {
        return "rgb(" + ~~(255 * Math.random()) + "," 
        + ~~(255 * Math.random()) 
        + "," + ~~(255 * Math.random()) + ")"
    }
    var d = [];
    e.requestAnimationFrame = 
    function () {
        return e.requestAnimationFrame 
        || e.webkitRequestAnimationFrame 
        || e.mozRequestAnimationFrame 
        || e.oRequestAnimationFrame 
        || e.msRequestAnimationFrame 
        || function (e) {
            setTimeout(e, 1e3 / 60)
        }
}(), n()
}(window, document);

JS中!function(){}()的理解

js之立即执行函数

立即执行函数，传参方法

!function(){}()这是立即执行函数，上面这个立即执行函数传入了e, t, a，后面的括号是对应的实参，也就是e=window, t=document

标签：function,heart,查漏,45deg,transform,window,radius,border
来源： https://www.cnblogs.com/Huang-zihan/p/16470589.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。