MarioBoy

博客魔改
魔改首页文章版式圆角化 .panel{ border: none; border-radius: ...
扫描右侧二维码阅读全文
07
2018/07

博客魔改

魔改

  1. 首页文章版式圆角化

       .panel{
       border: none;
       border-radius: 15px;
       }
    
       .panel-small{
       border: none;
       border-radius: 15px;
       }
    
       .item-thumb{
       border-radius: 15px;  
        }
    
  2. 首页文章图片获取焦点放大

    #放大的时间和大小自行修改以下数值
       .item-thumb{
       cursor: pointer;  
       transition: all 0.6s;  
       }
    
    .item-thumb:hover{
         transform: scale(1.05);  
       }
    
       .item-thumb-small{
       cursor: pointer;  
       transition: all 0.6s;
       }
    
       .item-thumb-small:hover{
       transform: scale(1.05);
       }
  3. 首页头像自动旋转

    #转动快慢和头像大小自行修改数值
       .thumb-lg{
       width:130px;
       }
    
       .avatar{
       -webkit-transition: 0.4s;
       -webkit-transition: -webkit-transform 0.4s ease-out;
       transition: transform 0.4s ease-out;
       -moz-transition: -moz-transform 0.4s ease-out; 
        }
    
       .avatar:hover{
       transform: rotateZ(360deg);
       -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
       }
    
          #aside-user span.avatar{
       animation-timing-function:cubic-bezier(0,0,.07,1)!important;
       border:0 solid
       }
    
       #aside-user span.avatar:hover{
       transform:rotate(360deg) scale(1.2);
       border-width:5px;
       animation:avatar .5s
       }
    
  4. 文章标题居中

       .panel h2{
       text-align: center; 
       }
       .post-item-foot-icon{
       text-align: center;
       }
  5. panel阴影

       #阴影颜色修改rgba后面的值
       .panel{
         box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
       -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
       }
    
       .panel:hover{
       box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
       -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
       }
    
       .panel-small{
        box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
       -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
       }
    
       .panel-small:hover{
       box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
       -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
       }
       #如果也想使盒子四周也有阴影,加上以下代码
       .app.container {
       box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
       }
    
  6. 标题字体

       @font-face{
       font-family:"changjiang";
       src:url("http://www.changjiangblog.top/usr/themes/handsome/assets/fonts/SigmarOne.woff.ttf")
       }
    
  7. 字体抖动

       @keyframes shake-it{
       0%{
           text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5);
       }
       25%{
           text-shadow: -1px 0 rgba(0, 255, 255, .5), 1px 0 rgba(255, 0, 0, .5);
       }
       50%{
           text-shadow: -3px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
       }
       100%{
           text-shadow: 2px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);
       }
       }
    
  8. 蛛网特效
!function () {
//封装方法,压缩之后减少文件大小
function get_attribute(node, attr, default_value) {
    return node.getAttribute(attr) || default_value;
}

//封装方法,压缩之后减少文件大小
function get_by_tagname(name) {
    return document.getElementsByTagName(name);
}

//获取配置参数
function get_config_option() {
    var scripts = get_by_tagname("script"),
        script_len = scripts.length,
        script = scripts[script_len - 1]; //当前加载的script
    return {
        l: script_len, //长度,用于生成id用
        z: get_attribute(script, "zIndex", -1), //z-index
        o: get_attribute(script, "opacity", 0.5), //opacity
        c: get_attribute(script, "color", "0,0,0"), //color
        n: get_attribute(script, "count", 99) //count
    };
}

//设置canvas的高宽
function set_canvas_size() {
    canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}

//绘制过程
function draw_canvas() {
    context.clearRect(0, 0, canvas_width, canvas_height);
    //随机的线条和当前位置联合数组
    var e, i, d, x_dist, y_dist, dist; //临时节点
    //遍历处理每一个点
    random_points.forEach(function (r, idx) {
        r.x += r.xa,
            r.y += r.ya, //移动
            r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1,
            r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界,反向反弹
            context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点
        //从下一个点开始
        for (i = idx + 1; i < all_array.length; i++) {
            e = all_array[i];
            // 当前点存在
            if (null !== e.x && null !== e.y) {
                x_dist = r.x - e.x; //x轴距离 l
                y_dist = r.y - e.y; //y轴距离 n
                dist = x_dist * x_dist + y_dist * y_dist; //总距离, m

                dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速
                    d = (e.max - dist) / e.max,
                    context.beginPath(),
                    context.lineWidth = d / 2,
                    context.strokeStyle = "rgba(" + config.c + "," + (d + 0.2) + ")",
                    context.moveTo(r.x, r.y),
                    context.lineTo(e.x, e.y),
                    context.stroke());
            }
        }
    }), frame_func(draw_canvas);
}

//创建画布,并添加到body中
var the_canvas = document.createElement("canvas"), //画布
    config = get_config_option(), //配置
    canvas_id = "c_n" + config.l, //canvas id
    context = the_canvas.getContext("2d"), canvas_width, canvas_height,
    frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (func) {
        window.setTimeout(func, 1000 / 45);
    }, random = Math.random,
    current_point = {
        x: null, //当前鼠标x
        y: null, //当前鼠标y
        max: 15000 // 圈半径的平方
    },
    all_array;
the_canvas.id = canvas_id;
the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
get_by_tagname("body")[0].appendChild(the_canvas);

//初始化画布大小
set_canvas_size();
window.onresize = set_canvas_size;
//当时鼠标位置存储,离开的时候,释放当前位置信息
window.onmousemove = function (e) {
    e = e || window.event;
    current_point.x = e.clientX;
    current_point.y = e.clientY;
}, window.onmouseout = function () {
    current_point.x = null;
    current_point.y = null;
};
//随机生成config.n条线位置信息
for (var random_points = [], i = 0; config.n > i; i++) {
    var x = random() * canvas_width, //随机位置
        y = random() * canvas_height,
        xa = 2 * random() - 1, //随机运动方向
        ya = 2 * random() - 1;
    // 随机点
    random_points.push({
        x: x,
        y: y,
        xa: xa,
        ya: ya,
        max: 6000 //沾附距离
    });
}
all_array = random_points.concat([current_point]);
//0.1秒后绘制
setTimeout(function () {
    draw_canvas();
}, 100);
}();
  1. 评论框烟花特效

(function webpackUniversalModuleDefinition(a, b) {

if (typeof exports === "object" && typeof module === "object") {
    module.exports = b()
} else {
    if (typeof define === "function" && define.amd) {
        define([], b)
    } else {
        if (typeof exports === "object") {
            exports["POWERMODE"] = b()
        } else {
            a["POWERMODE"] = b()
        }
    }
}
})(this, function () {
return (function (a) {
    var b = {};

    function c(e) {
        if (b[e]) {
            return b[e].exports
        }
        var d = b[e] = {exports: {}, id: e, loaded: false};
        a[e].call(d.exports, d, d.exports, c);
        d.loaded = true;
        return d.exports
    }

    c.m = a;
    c.c = b;
    c.p = "";
    return c(0)
})([function (c, g, b) {
    var d = document.createElement("canvas");
    d.width = window.innerWidth;
    d.height = window.innerHeight;
    d.style.cssText = "position:fixed;top:0;left:0;pointer-events:none;z-index:999999";
    window.addEventListener("resize", function () {
        d.width = window.innerWidth;
        d.height = window.innerHeight
    });
    document.body.appendChild(d);
    var a = d.getContext("2d");
    var n = [];
    var j = 0;
    var k = 120;
    var f = k;
    var p = false;
    o.shake = true;

    function l(r, q) {
        return Math.random() * (q - r) + r
    }

    function m(r) {
        if (o.colorful) {
            var q = l(0, 360);
            return "hsla(" + l(q - 10, q + 10) + ", 100%, " + l(50, 80) + "%, " + 1 + ")"
        } else {
            return window.getComputedStyle(r).color
        }
    }

    function e() {
        var t = document.activeElement;
        var v;
        if (t.tagName === "TEXTAREA" || (t.tagName === "INPUT" && t.getAttribute("type") === "text")) {
            var u = b(1)(t, t.selectionStart);
            v = t.getBoundingClientRect();
            return {x: u.left + v.left, y: u.top + v.top, color: m(t)}
        }
        var s = window.getSelection();
        if (s.rangeCount) {
            var q = s.getRangeAt(0);
            var r = q.startContainer;
            if (r.nodeType === document.TEXT_NODE) {
                r = r.parentNode
            }
            v = q.getBoundingClientRect();
            return {x: v.left, y: v.top, color: m(r)}
        }
        return {x: 0, y: 0, color: "transparent"}
    }

    function h(q, s, r) {
        return {x: q, y: s, alpha: 1, color: r, velocity: {x: -1 + Math.random() * 2, y: -3.5 + Math.random() * 2}}
    }

    function o() {
        var t = e();
        var s = 5 + Math.round(Math.random() * 10);
        while (s--) {
            n[j] = h(t.x, t.y, t.color);
            j = (j + 1) % 500
        }
        f = k;
        if (!p) {
            requestAnimationFrame(i)
        }
        if (o.shake) {
            var r = 1 + 2 * Math.random();
            var q = r * (Math.random() > 0.5 ? -1 : 1);
            var u = r * (Math.random() > 0.5 ? -1 : 1);
            document.body.style.marginLeft = q + "px";
            document.body.style.marginTop = u + "px";
            setTimeout(function () {
                document.body.style.marginLeft = "";
                document.body.style.marginTop = ""
            }, 75)
        }
    }

    o.colorful = false;

    function i() {
        if (f > 0) {
            requestAnimationFrame(i);
            f--;
            p = true
        } else {
            p = false
        }
        a.clearRect(0, 0, d.width, d.height);
        for (var q = 0; q < n.length; ++q) {
            var r = n[q];
            if (r.alpha <= 0.1) {
                continue
            }
            r.velocity.y += 0.075;
            r.x += r.velocity.x;
            r.y += r.velocity.y;
            r.alpha *= 0.96;
            a.globalAlpha = r.alpha;
            a.fillStyle = r.color;
            a.fillRect(Math.round(r.x - 1.5), Math.round(r.y - 1.5), 3, 3)
        }
    }

    requestAnimationFrame(i);
    c.exports = o
}, function (b, a) {
    (function () {
        var d = ["direction", "boxSizing", "width", "height", "overflowX", "overflowY", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderStyle", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "fontStyle", "fontVariant", "fontWeight", "fontStretch", "fontSize", "fontSizeAdjust", "lineHeight", "fontFamily", "textAlign", "textTransform", "textIndent", "textDecoration", "letterSpacing", "wordSpacing", "tabSize", "MozTabSize"];
        var e = window.mozInnerScreenX != null;

        function c(k, l, o) {
            var h = o && o.debug || false;
            if (h) {
                var i = document.querySelector("#input-textarea-caret-position-mirror-div");
                if (i) {
                    i.parentNode.removeChild(i)
                }
            }
            var f = document.createElement("div");
            f.id = "input-textarea-caret-position-mirror-div";
            document.body.appendChild(f);
            var g = f.style;
            var j = window.getComputedStyle ? getComputedStyle(k) : k.currentStyle;
            g.whiteSpace = "pre-wrap";
            if (k.nodeName !== "INPUT") {
                g.wordWrap = "break-word"
            }
            g.position = "absolute";
            if (!h) {
                g.visibility = "hidden"
            }
            d.forEach(function (p) {
                g[p] = j[p]
            });
            if (e) {
                if (k.scrollHeight > parseInt(j.height)) {
                    g.overflowY = "scroll"
                }
            } else {
                g.overflow = "hidden"
            }
            f.textContent = k.value.substring(0, l);
            if (k.nodeName === "INPUT") {
                f.textContent = f.textContent.replace(/\s/g, "\u00a0")
            }
            var n = document.createElement("span");
            n.textContent = k.value.substring(l) || ".";
            f.appendChild(n);
            var m = {
                top: n.offsetTop + parseInt(j["borderTopWidth"]),
                left: n.offsetLeft + parseInt(j["borderLeftWidth"])
            };
            if (h) {
                n.style.backgroundColor = "#aaa"
            } else {
                document.body.removeChild(f)
            }
            return m
        }

        if (typeof b != "undefined" && typeof b.exports != "undefined") {
            b.exports = c
        } else {
            window.getCaretCoordinates = c
        }
    }())
}])
});
POWERMODE.colorful = true;
POWERMODE.shake = false;
document.body.addEventListener("input", POWERMODE);

源代码下载:

**
评论特效
蛛网特效
鼠标点击爱心特效

Last modification:July 7th, 2018 at 11:17 pm
If you think my article is useful to you, please feel free to appreciate

6 comments

  1. 科科

    这些特效是直接放入/body 前就行了么?

    1. MarioBoy
      @科科

      对的,就是一个js。我的handsome主题还可以通过后台管理手动输入js或者css代码。

  2. jaymi

    像 fulibus.net 这样的鼠标点击出富强民主等字的博主知道怎么改吗?我已经把那段加到我footer了还是没效果。

  3. 刘世超

    文章中,评论框代码部分排版有问题

    1. 长江
      @刘世超

      谢谢指出,缩进确实有些问题,这就去改一改。

      1. 刘世超
        @长江

        (function webpackUniversalModuleDefinition(a, b) {

        是这部分没,包含在代码里。第一行

Leave a Comment