1、头像呼吸光环和鼠标悬停旋转放大

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}

.img-full:hover {
    transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

    25% {
        box-shadow: 0 0 16px #0f0;
    }

    50% {
        box-shadow: 0 0 4px #00f;
    }

    75% {
        box-shadow: 0 0 16px #0f0;
    }

    100% {
        box-shadow: 0 0 4px #f00;
    }
}

2、左侧文章图标和评论头像鼠标悬停旋转

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*左侧文章图标和评论头像鼠标悬停旋转*/
.img-circle {
    transition: all 0.3s;
}

.img-circle:hover {
    transform: rotate(360deg);
}

3、文章内打赏图标跳动

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*文章内打赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

4、彩色标签云

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可

<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

如果主题中启用了pjax,还需要将上面代码添加到pjax-pjax回调函数中。


5、首页文章列表悬停上浮

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*首页文章列表悬停上浮*/
.blog-post .panel:not(article) {
    transition: all 0.3s;
}

.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

6、首页文章列表头图悬停放大并将超出范围隐藏

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*首页文章列表头图悬停放大并将超出范围隐藏*/
.index-post-img {
    overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}

7、文章内头图和文章图片悬停放大并将超出范围隐藏

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*文章内头图和文章图片悬停放大并将超出范围隐藏*/
.entry-thumbnail {
    overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}

8、右侧列表导航栏图标颜色

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*右侧列表导航栏图标颜色*/
.glyphicon-fire {
    color: #ff0000;
}

.nav-tabs-alt .glyphicon-comment {
    color: #495dc3;
}

.glyphicon-transfer {
    color: #0e5458;
}

9、文章标题居中

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}
.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

10、复制弹框

首先将下方代码复制添加至后台主题设置自定义输出body 尾部的HTML代码

<!--复制弹框-->
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处!',showConfirmButton: false,timer: 2000});};

最后复制下方代码打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可

<!--复制弹框-->
document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留本文链接!');};

11、左侧文章图标之金馆长小埋


将图片文件覆盖至/usr/themes/handsome/usr/img/sj2即可


12、给导航栏加上天气


打开心知天气,地址:https://www.seniverse.com/widget 进入后配置好 然后点击下方的生成代码

天气
注意:复制之后需要修改心知生成的代码,否则导航栏会错位

需要将心知代码第一行的<div id="tp-weather-widget">
改成<div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift">

修改好之后将代码添加到/usr/themes/handsome/component/headnav.php第48行下方即可


13、文本框打字机特效


复制下方代码添加至后台主题设置 - 开发者设置 - 自定义输出body 尾部的HTML代码 即可

<!--文本框打字机特效-->
<script type="text/javascript" src="https://lioeo.cn/usr/commentTyping.js"></script>

14、将QQ头像设置为左边导航栏图片

https://q1.qlogo.cn/g?b=qq&nk=1094908379&s=640

复制上方地址修改1094908379为自己 QQ - 随后将地址添加到初级设置 - 头像图片地址 即可


15、站点右侧添加响应耗时

将以下代码存放到主题的functions.php中,可以放在最后面:

/**
 * * 加载时间
 * * @return bool
 * */
function timer_start() {
    global $timestart;
    $mtime = explode( ' ', microtime()  );
    $timestart = $mtime[1] + $mtime[0];
    return true;
    
}
timer_start();
function timer_stop( $display = 0, $precision = 3  ) {
    global $timestart, $timeend;
    $mtime = explode( ' ', microtime()  );
    $timeend = $mtime[1] + $mtime[0];
    $timetotal = number_format( $timeend - $timestart, $precision  );
    $r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
    if ( $display  ) {
        echo $r;
        
    }
    return $r;
    
}

然后在右侧边栏加上响应耗时部分,具体就是修改component/sidebar.php这个文件,在合适的位置加上如下代码:

<li class="list-group-item"> <i class="glyphicon glyphicon-time text-muted"></i> <span class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>

以上部分美化代码转自:大西瓜博客

版权属于:云雾 ' Blog

本文链接: https://lioeo.cn/14.html

文章标题:本站基于Handsome的一些美化 [ 持续更新 ]

版权协议:本站遵循 CC BY-NC-ND 4.0 协议 转载请注明出处!

云雾'Blog小程序
Last modification:November 10th, 2019 at 01:11 am
如果觉得我的文章对你有用,请随意赞赏