阿七

关于handsome主题下的一些美化修改
1、首页文章版式圆角化本项修改的是首页文章版式,包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置...
扫描右侧二维码阅读全文
20
2018/12

关于handsome主题下的一些美化修改

首先感谢@Rat's BlogYue Web Blog@神代綺凜の萌化小基地@知言笔记等大佬的分享
我只是个负责搬运的搬运工小白

1、首页文章版式圆角化

本项修改的是首页文章版式,包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置 自定义CSS

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

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

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

2、首页文章图片获取焦点放大

本项修改的是首页文章图片,将鼠标放到首页头图后使其放大。将以下代码添加至后台主题设置 自定义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);
}

3、首页头像转动并放大

本项修改的是首页头像,将鼠标放至头像后使其转动并放大。将以下代码添加至后台主题设置 自定义CSS

#转动快慢和头像大小自行修改数值
/*首页头像自动旋转*/
.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、首页头像放大并自动旋转

本项修改的是首页头像,效果就是将首页头像放大,并使其自动旋转。将以下代码添加至后台主题设置 自定义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;
}

5、文章标题居中

本项修改的是文章标题,使其居中。将以下代码添加至后台主题设置 自定义CSS

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

6、首页文章版式阴影化

本项修改的是首页文章版式,包括图片使其四周加上一层绚丽的阴影。将以下代码添加至后台主题设置 自定义CSS

#阴影颜色修改rgba后面的值
/*panel阴影*/
.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);
}

7、自定义滚动条滑块

本项修改针对浏览器最右边的滚动条滑块,使其改变样式。将以下代码添加至后台主题设置 自定义CSS

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 3px;
    height: 16px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;

8、评论表情修改

本项修改评论表情,将原始表情替换成泡泡和阿鲁,只需要替换主题文件里的OwO.min.jsOwO.json文件就可以了。OwO.min.jshandsome/assets/js/features文件夹,OwO.jsonhandsome/usr文件夹。

9.1、鼠标点击特效代码版

将以下代码放在主题的handsome/component/footer.php中的</body>之前即可。

#字体自行修改
<script type="text/javascript"> 
/* 鼠标特效 */
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>

9.2、鼠标点击特效插件版

  • fireworks+anime喷墨效果
    image
  • 文字气泡效果
    image
  • 爱心气泡效果
    image

使用方法

  • 下载本插件,解压放到usr/plugins/目录中
  • 文件夹名改为HoerMouse
  • 登录管理后台,激活插件

10.1、评论框特效代码版

下载特效JS文件将其放在网站目录某个地方,然后编辑主题文件handsome/component/footer.php,在</body>后面添加以下代码。

<script type="text/javascript" src="JS文件路径"></script>

10.2、评论框特效插件版

  • 打字特效插件ActivatePowerMode
    image

使用方法

  • 下载本插件,解压放到usr/plugins/目录中
  • 文件夹名改为ActivatePowerMode
  • 登录管理后台,激活插件

插件说明

  • 插件基于activate-power-mode.js

11、文章样式修改

新建一份css文件,输入以下代码。在网站引用即可

@charset "utf8";
/*Modifi-css for handsome 4.5.x*/
/*main*/
.entry-content{background-color:transparent}.panel-small .post-meta{padding:25px 30px 15px 25px!important}.panel-small .pos50t-meta{padding-left:25px;padding-right:25px}.b-light{border-color:#bbb4}.tip:before{margin-top:0!important}.wrapper-md .panel:not(.b-a),.wrapper-md .panel-small{transition:all .2s;box-shadow:1px 1px 3px 1px rgba(0,0,0,0.2)!important}.wrapper-md .panel:not(.b-a):hover,.wrapper-md .panel-small:hover{box-shadow:1px 1px 5px 2px rgba(0,0,0,0.3)!important}.list-group-item{background-color:rgba(255,255,255,.8)}.thumb-lg{width:130px}#widget-tabs-4-comments .list-group-item,#tag_toc,#post-panel,#sidebar,#post-content{background-color:transparent!important}#alllayout.app-aside-folded .tooltip{display:none!important}.standpage{width:100%;height:calc(100% - 50px);position:fixed;top:50px;left:0}.standpage,aside,aside *{transition:all .3s}.wrapper-md>#comments,.wrapper-md>.blog-post,.wrapper-md>.breadcrumb,.m-t-lg.m-b-lg,.wrapper-md>.no_search_result{max-width:800px;margin-left:auto;margin-right:auto}.wrapper-md .panel,.wrapper-md .panel-small,.wrapper-md>#comments,.wrapper-md>.breadcrumb{background-color:rgba(255,255,255,.9)}.wrapper-md article,.wrapper-md>#comments{border-radius:5px;overflow:hidden}.bg-auto:before{bottom:51px}@media screen and (min-width:992px){aside.col.w-md.b-l{background-color:rgba(255,255,255,.7)}aside.col.w-md.b-l:hover{background-color:#fff}}header.wrapper-md{background-color:rgba(246,248,248,.93)!important}.blog-post>.panel,.blog-post>.panel-small{border:0;border-radius:5px}.index-post-img,.index-post-img-small{border-top-left-radius:5px;border-top-right-radius:5px;overflow:hidden}.blog-post>.panel .index-post-img .item-thumb,.panel-small .index-post-img-small .item-thumb-small,.index-post-title a{transition:all .2s}.blog-post>.panel:hover .index-post-img .item-thumb,.blog-post>.panel-small:hover .index-post-img-small .item-thumb-small{transform:scale(1.05)}#footer>.wrapper{background-color:rgba(237,241,242,.8)}.streamline{margin-left:20px;padding-right:10px}.streamline .comment-body{position:relative}.streamline .comment-body .m-l-lg:before{background-color:rgba(255,255,255,.9);content:" ";position:absolute;width:calc(100%+10px);height:calc(100%+20px);top:-10px;left:0;z-index:-1;border-radius:2px;box-shadow:0 0 2px 2px rgba(0,0,0,.125)}aside.col.w-md.no-border-xs{transition:all .3s}.visible-xs-inline{display:inline-block!important}@media screen and (min-width:768px) and (max-width:1140px){.visible-xs-inline{display:none!important}}.tocify-item{background-color:rgba(255,255,255,.8)}.tocify-item.active{color:#7266ba;font-weight:700}#kotori{position:absolute;left:-15px;bottom:-15px;max-height:110px;transition:all .3s}#kotori:hover{left:0;bottom:0}#kotori.hidekotori{left:-110px;bottom:-110px}@media screen and (max-width:767px){#kotori{display:none}.blog-post>.panel:hover .index-post-img .item-thumb{transform:none!important}}.index-post-title a:hover{color:#2ebaae}.wrapper-md .comment-list .comment-parent,.wrapper-md .comment-list .comment-children{border-top-width:1px;border-top-style:solid;border-top-color:#ddd;padding-top:10px}.max-img{max-height:400px}.navi-wrap .navi.clearfix>ul.nav{padding-bottom:100px}.app-aside-folded.navi-wrap{max-height:calc(100% - 50px)}.lg-backdrop{background-color:rgba(0,0,0,.8)}.skPlayer-name{font-family:"Source Sans Pro","Hiragino Sans GB","Microsoft Yahei",SimSun,Helvetica,Arial,Sans-serif}html.fancybox-enabled{overflow-y:auto}.fancybox-bg{background-color:rgba(0,0,0,.95)}.fancybox-arrow:after{background-color:rgba(0,0,0,.8)}.blog-post .post-meta.wrapper-lg{padding-top:15px}.share,.yellow,.red,.lblue,.green{background-position-y:50%}.timeline .tl-date{color:#fff;text-shadow:0 0 4px #000}body.modal-open{overflow-y:auto;padding-right:0!important}.reply2view{background-color:transparent;border:solid 1px #bbb}#content{transition:all .3s}.OwO .OwO-logo{height:28px}#tag_toc.fixed #toc{width:100%}.page-navigator .next a,.page-navigator .prev a{height:31px}.page-navigator>li:last-child>a,.page-navigator>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}#tooltip-1{width:0;height:0;overflow:hidden}.tooltip-2{width:0;height:0;border:0}.item-thumb-small{background-position:left}
/*experimental modify 2018-07-19*/
@media screen and (min-width:1200px){.sticky{position: absolute;top: 10px;left: 15px}.panel .item-thumb{height:300px}#post-panel .blog-post{position:relative}#post-panel .panel{overflow:hidden}#post-panel .panel .post-meta{position:relative;margin-top:-300px;height:300px;padding-top:133px!important;padding-bottom:0!important;background-color:rgba(0,0,0,.3);color:#fff!important;transition:all .3s}#post-panel .panel .post-meta,#post-panel .panel-small .post-meta{border-radius:5px}#post-panel .panel .post-meta *,#post-panel .panel-small .post-meta *{color:#fff!important}#post-panel .panel .post-meta>h2,#post-panel .panel-small .post-meta>h2{text-align:center;text-shadow:0 0 3px #fff}#post-panel .panel .post-meta>p,#post-panel .panel .post-meta>div,#post-panel .panel-small .post-meta>p,#post-panel .panel-small .post-meta>div{transition:all .3s;transform:translateY(-10px);opacity:0}#post-panel .panel .post-meta>.text-muted,#post-panel .panel-small .post-meta>.text-muted{position:absolute;bottom:20px}#post-panel .panel .post-meta>.line{position:absolute;bottom:40px;width:740px}#post-panel .panel-small .post-meta>.line{position:absolute;bottom:40px;width:350px}#post-panel .panel .post-meta>.summary{position:absolute;bottom:60px;width:740px}#post-panel .panel-small .post-meta>.summary{position:absolute;bottom:60px;width:350px}#post-panel .panel-small{display:inline-block;height:300px;width:calc(50% - 10px);margin-right:20px}#post-panel .panel-small:nth-child(2n){margin-right:0}#post-panel .panel-small .index-img-small,#post-panel .panel-small .index-img-small .item-thumb-small{height:100%;width:100%}#post-panel .panel-small .post-meta{position:absolute;height:300px;width:calc(50% - 10px);padding:133px 20px 0 20px!important;background-color:rgba(0,0,0,.3);color:#fff!important;transition:all .3s}#post-panel .panel:hover .post-meta,#post-panel .panel-small:hover .post-meta{background-color:rgba(0,0,0,.6)}#post-panel .panel:hover .post-meta>p,#post-panel .panel:hover .post-meta>div,#post-panel .panel-small:hover .post-meta>p,#post-panel .panel-small:hover .post-meta>div{opacity:1;transform:translateY(0)}#post-panel .panel:hover .post-meta,#post-panel .panel-small:hover .post-meta{padding-top:80px!important}#post-panel .ahover{display:block;position:absolute;top:0;left:0;right:0;bottom:0}.blog-post>.panel:hover .index-post-img,.blog-post>.panel-small:hover .index-post-img-small{filter:blur(3px)}}header.bg-light.wrapper-md{margin-top:30px;background-color:transparent!important;border:0;text-align:center;text-shadow:0 0 3px #000}header.wrapper-md *{color:#fff}header.wrapper-md h1{font-size:32px}header.wrapper-md h1{font-weight:bold!important}
/*links*/
.link-main{padding:50px 0 50px 20px;text-align:center}.link-main h3{margin-top:0}.link-main .item{display:inline-block;letter-spacing:0;margin-right:20px;margin-bottom:20px;width:289px;height:240px;font-size:14px;overflow:hidden;border-radius:5px;background:rgba(255,255,255,.95);border:1px solid #e1e8ed;transition:background .2s}.link-main .link-bg{position:relative;height:90px;padding:0 1em;background-color:#777}.link-main .link-bg .bg:before{display:block;content:"";position:absolute;left:0;height:100%;width:100%;background:rgba(0,0,0,.5)}.link-main .link-bg .link-avatar{position:absolute;bottom:-50px;border:4px solid #FFF;border-radius:100%;background-color:#fff;box-shadow:0 0 5px rgba(0,0,0,0.5)}.link-main .link-bg .link-avatar img{border-radius:100%}.link-main .avatar{display:block;object-fit:cover}.link-main .bg,.link-main .link-bg{background-repeat:no-repeat;background-position:center;background-size:cover;display:block}.link-main .bg{position:absolute;top:0;bottom:0;left:0;right:0;filter:blur(1.5px);background-color:#fff}.link-main .meta{padding:.9em 1em;text-align:right}.link-main .info{color:#525766;padding:0 1em 1em}.link-main .info .name{font-weight:600;font-size:16px}@media screen and (max-width:330px){.link-main{padding:50px 0 50px 0}.link-main .item{margin-right:0}}.link-main .item:hover{background:rgba(255,255,255,1)}.link-main .item:hover .bg{filter:blur(0.1px)}
/*comments*/
#comments pre code{display:inline}.wrapper-md>#comments{border:solid 1px #fff;padding:10px 30px 20px 30px}.hideContent{background-color:transparent;padding:10px 0}
.agent {display: inline-block;margin-left: 5px;padding: 0 3px;border-radius: 2px;color: #58666e;font-size: 12px;opacity: .8}
/*img*/
img[mw400]{max-width:400px!important;width:100%}.mw400{max-width:400px}

样式展示:
image
image

12、文章图片添加抖动效果

本项修改文章内鼠标放置图片上,使其抖动。将以下代码添加至后台主题设置 自定义CSS

img:hover {
-webkit-animation:sucaijiayuan 1s .1s ease both;
-moz-animation:tada 1s .1s ease both;
}
@-webkit-keyframes sucaijiayuan {
0% {
-webkit-transform:scale(1)
}
10%, 20% {
-webkit-transform:scale(0.8) rotate(-2deg)
}
30%, 50%, 70%, 90% {
-webkit-transform:scale(1.1) rotate(2deg)
}
40%, 60%, 80% {
-webkit-transform:scale(1.1) rotate(-2deg)
}
100% {
-webkit-transform:scale(1) rotate(0)
}

13.1、悬挂猫咪置顶插件

食用方法:
Download ZIP, 解压
重命名文件夹为GoTop
上传至usr/plugins目录
登录后台启用即可
如果主题模板已加载jquery,可以在插件设置内禁用加载jquery

更新信息:
1.0.0 项目完成
1.1.0 修复打开站点默认下拉的问题
1.2.0 增加动态效果

具体效果见下图:
image

13.2、至顶至底(雷姆拉姆)插件

插件介绍
加载插件后,页面左右下角出现拉姆和雷姆,点击就会触发至顶和至底功能。
注意事项
本插件需要加载JQuery,因为有的主题模板本身已经引入加载JQuery,所以插件设置内可以选择是否禁止插件加载自身的JQuery
如开启插件后没有出现心爱的雷姆和拉姆,请检查使用的主题模板的页首钩子<?php $this->header(); ?>和页脚钩子<?php $this->footer(); ?>是否存在。

14、本站底部蒲公英飘动特效

将以下代码添加至 自定义输出head头部的HTML代码 中

<!--蒲公英-->
    <div class="dandelion">
        <span class="smalldan"></span>
        <span class="bigdan"></span>
    </div>
     
    <style type="text/css">
    @media screen and (max-width:600px){
    .dandelion{display: none !important;}
    }
        .dandelion .smalldan {
    width: 36px;
    height: 60px;
    left: 631px;
    background-position: 0 -90px;
    border: 0px solid red;
    }
    .dandelion span {
    -webkit-animation: ball-x 3s linear 2s infinite;
      -moz-animation: ball-x 3s linear 2s infinite;
      animation: ball-x 3s linear 2s infinite;
    -webkit-transform-origin: bottom center;
      -moz-transform-origin: bottom center;
      transform-origin: bottom center;
    }
    .dandelion span {
    display: block;
    position: fixed;
    z-index:9999999999;
    bottom: 0px;
    background-image: url(http://mat1.gtimg.com/www/mb/images/zt/memory/pgy.png);
    background-repeat: no-repeat;
    _background: none;
    }
    .dandelion .bigdan {
    width: 64px;
    height: 110px;
    left: 657px;
    background-position: -86px -36px;
    border: 0px solid red;
    }
    @keyframes ball-x {
        0% { transform:rotate(0deg);}
       20% { transform:rotate(5deg); }
       40% { transform:rotate(0deg);}
       60% { transform:rotate(-5deg);}
       80% { transform:rotate(0deg);}
       100% { transform:rotate(0deg);}
    }
    @-webkit-keyframes ball-x {
        0% { -webkit-transform:rotate(0deg);}
       20% { -webkit-transform:rotate(5deg); }
       40% { -webkit-transform:rotate(0deg);}
       60% { -webkit-transform:rotate(-5deg);}
       80% { -webkit-transform:rotate(0deg);}
       100% { -webkit-transform:rotate(0deg);}
    }
    @-moz-keyframes ball-x {
        0% { -moz-transform:rotate(0deg);}
 
       20% { -moz-transform:rotate(5deg); }
       40% { -moz-transform:rotate(0deg);}
       60% { -moz-transform:rotate(-5deg);}
       80% { -moz-transform:rotate(0deg);}
       100% { -moz-transform:rotate(0deg);}
    }
    </style>
Last modification:July 4th, 2019 at 11:16 am
如果觉得我的文章对你有用,请随意赞赏

3 comments

  1. 阿七

    滴!访客卡!请上车的乘客系好安全带,现在是:Sat Jul 06 2019 13:33:29 GMT+0800 (中国标准时间)

  2. 承愚

    博主 你的音乐播放器插件是什么

    1. 阿七
      @承愚

      不是插件,改的代码

Leave a Comment