Typecho之handsome主题美化修改魔改教程

handsome主题美化修改魔改教程-handsome主题就是本站的主题，喜欢的小伙伴可以去购买这主题哦。现在还支持绑定微信公众号发送到博客时光机啦，

• 文章版式圆角化【将以下代码添加至后台主题设置自定义css】

#圆角大小可修改15px数值
/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

.panel-small{
    border: none;
    border-radius: 15px;
}

.item-thumb{
    border-radius: 15px;
}

• 首页文章图片获取焦点放大 【将以下代码添加至后台主题设置自定义css】

    #放大的时间和大小自行修改以下数值
    /*首页文章图片获取焦点放大*/
    .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);
    }
<script type="text/javascript">

• 鼠标点击特效【放在主题的handsome/component/footer.php中的</body>之前】

/

鼠标特效

/

var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,

            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#ff6651"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

• 首页头像放大并自动旋转【将以下代码添加至后台主题设置自定义css】

#旋转速度请修改3s数值
/*首页头像放大并自动旋转*/
.thumb-lg{
    width:130px;
}

@-webkit-keyframes rotation{
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

.img-full{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}