耿俭

Handsome主题个性美化代码大全
handsome主题修改美化代码,将代码放到 handsome主题设置-开发者设置-自定义css与自定义JavaS...
扫描右侧二维码阅读全文
20
2019/06

Handsome主题个性美化代码大全

handsome主题修改美化代码,将代码放到 handsome主题设置-开发者设置-自定义css与自定义JavaScript中。
Handsome主题设置
文章列表及文章页面 div圆角化
其中10px这个值可以修改,是圆角的大小。

/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 10px;
}

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

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

侧边栏头像转动并放大
将这段代码放到 handsome主题设置-开发者设置-自定义css 中。
可以修改最后一个类选择器——#aside-user span.avatar:hover 中 scale(1.2); 这个 1.2的值,它是头像放大的程度。

/*首页头像自动旋转*/
.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
}

文章列表及内页盒子阴影
将这段代码放到 handsome主题设置-开发者设置-自定义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);
}

自定义滚动滑条块
将这段代码放到 handsome主题设置-开发者设置-自定义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;
文章列表及文章内页h2标题居中

将这段代码放到 handsome主题设置-开发者设置-自定义css 中。
这段代码会使文章列表以及文章页面的 h2标题(编辑器工具条默认的标题) 和 文章列表的作者时间评论等信息 居中。

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

首页缩略图悬停时放大
将这段代码放到 handsome主题设置-开发者设置-自定义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);
}

放大时不溢出父元素
/首页文章版式圆角化,及头图鼠标悬停放大

.index-post-img,.entry-thumbnail,.panel,.panel-small{
  overflow: hidden;
}
.index-post-img img,.entry-thumbnail img{
  cursor: pointer;
  transition: all 0.6s;
}
.index-post-img img:hover,.entry-thumbnail img:hover{
  transform: scale(1.1);
}

点击飘出二十四字核心价值观
将这段代码放到 handsome主题设置-开发者设置-自定义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(); 
        }); 
    }); 
}); 

差不多就这么多了,又需要的拿走吧。

最后修改:2019 年 06 月 20 日 11 : 34 PM

发表评论