wigcw

Typecho之handsome主题美化修改魔改教程
handsome主题美化修改魔改教程-handsome主题就是本站的主题,喜欢的小伙伴可以去购买这主题哦。现在还支...
扫描右侧二维码阅读全文
07
2018/10

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;
}

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

Leave a Comment