样式美化

自用，将来主题数据要是消失，可以在改回来。
话不多说，上代码

首页文章版式圆角化

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

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

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

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

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

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

.avatar img {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}
.avatar img: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;
    }
}
.avatar:hover{
it-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
}

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

.img-circle {
    transition: all 0.3s;
}

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

定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸

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

文章底部版权

<center>
<img src="https://pic.denry.cn/2019/10/27/c3e9a03d95df1.png" alt="公安备案" title="公安备案">
&nbsp;<a href="http://www.beian.miit.gov.cn" target="_blank" rel="nofollow">    鲁ICP备16004384号 </a>&nbsp;<span>
<a target="_blank" href="https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral">
<img src="https://pic.denry.cn/2019/10/27/eb64901b9b049.png" style="width: 60px;" alt="又拍云" title="又拍云"></a>
</span>
</center>
.cpright {
    position: relative;
    padding: 10px;
    background: rgba(220, 220, 220, 0.1);
    margin: 8px 0;
    font-size: 13px;
    border-left: 3px #f07aab96 solid;
    z-index: 1;
    font-family: "Microsoft Yahei","Droid Serif",Georgia,"Times New Roman",STHeiti,serif;
    text-align: left;
}
.cpright a:hover {
    color: #ff7979e8!important;
}
.cpright a {
    color: #999!important;
    margin: 4px;
    border-bottom: 0px solid #999!important;
}

#top-grrk{
    background:url(https://pic.denry.cn/2019/10/26/5db46513557e2.gif);
    height:4px;
    margin-top:21px;
    position:fixed;
    width:100%;
    Z-index:10;
}
.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

文章内打赏图标跳动

.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

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

    to {
        transform: scale(1.1);
    }
}

首页文章列表悬停上浮

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

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

.index-post-img {
    overflow: hidden;
}

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

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

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

.entry-thumbnail {
    overflow: hidden;
}

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

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

右侧列表导航栏图标颜色

.glyphicon-fire {
    color: #ff0000;
}

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

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

文章标题居中

.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}
.secret_comment {
    top: 5px;
}

滑稽小表情

让博客支持滑稽小表情
解压funny.zip,你将会得到funny文件夹和OwO.json文件

funny文件夹放于handsome主题usr/img/emotion/目录下
OwO.json替换原文件，此OwO.json文件位于usr/目录下

滑稽小表情自定义大小

.emotion-funny {
    width: 30px;
}
.comment-content-true img.emotion-funny {
    max-width: 100%!important;
}

自定义js

鼠标特效

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

彩色标签云

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

使用教程

左边导航栏

{"name":"笔记","class":"glyphicon glyphicon-book","link":"http://wiz.denry.cn"},
{"name":"图床","class":"fontello fontello-picture","link":"http://img.denry.cn"},
{"name":"相册","class":"glyphicon glyphicon-camera","link":"https://www.denry.cn/category/image","target":"_self"},
{"name":"黑洞","class":"fontello fontello-lock","link":"https://www.denry.cn/category/diary/","target":"_self"}

时光机社交按钮

{"name":"twitter","class":"fa fa-twitter","link":"#"},
{"name":"facebook","class":"fa fa-facebook","link":"#"},
{"name":"googlepluse","class":"fa fa-google-plus","link":"#"},
{"name":"github","status":"single","link":"#"}

按钮的使用

[button]矩形按钮文字[/button]
[button color="succees"]矩形按钮文字[/button]
[button type="round" color="success"]椭圆形按钮文字[/button]
[button color="success" icon="glyphicon glyphicon-eur"]图标按钮文字[/button]
[button color="danger" icon="fontello fontello-gratipay" url="https://wwww.denry.cn"]博客地址[/button]





回复可见

此处内容需要评论回复后（审核通过）方可阅读。

此处内容需要评论回复后（审核通过）方可阅读。

登录可见

该部分仅登录用户可见

该部分仅登录用户可见

插入短代码高亮文本


这是黄色的短代码框，常用来做提示，引起读者注意。

这是红色的短代码框，用于严重警告什么的。

这是浅蓝色的短代码框，用于显示一些信息。

这是绿色的短代码框，显示一些推荐信息。

收缩框

标题

一些文字内容

标题

一些文字内容

标签页

内容 1
内容 2

插入标签

默认白色文字
紫色文字
蓝色文字
黄色文字
红色文字
绿色文字
黑色文字

最后修改：2019 年 11 月 10 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏