handsome美化-持续更新

博主： xiaoxiao
发布时间：2021 年 08 月 28 日
1312次浏览
30 条评论
538字数
分类：其他 typecho

建议收藏备忘，本文涉及代码操作的地方皆有注释，以便后期修改

这本教程所用方法仅适于Handsome主题，其他主题未尝试

自定义

评论打卡

打卡

是一个记录与互动的巧妙设计。看到网上有部分站长在自己的博客中加入了评论打卡这一功能，个人觉得还不错，于是决定动手魔改一下。

下面是本站引入了一键评论打卡功能的实现过程，请有需要的站长按需"食用"，先看前、后效果：

⚠️ 注意：本教程仅在 Handsome 主题下通过测试，其它平台请自行 DIY 。

第一步：打开 Handsome 主题目录下的 component/comments.php 文件，找到并删除如下内容：

 <div class="comment-form-comment form-group">
                        <label class="padder-v-sm" for="comment"><?php _me("评论") ?>
                            <span class="required text-danger">*</span></label>
                        <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                        <div class="OwO padder-v-sm"></div>
                        <?php $options = mget(); if (in_array('ajaxComment', Utils::checkArray( $options->featuresetup))): ?>
                        <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
                        data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
                            <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
                            <div class="secret_comment_check">
                                <label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
                                    <input type="checkbox" id="secret_comment_checkbox">
                                    <i></i>
                                </label>
                            </div>
                        </div>
                        <?php endif; ?>
                    </div>

接着在相同位置，加入以下 HTML 代码：

<div class="comment-form-comment form-group">
                        <label for="comment"><?php _me("评论") ?> 
                            <span class="required text-danger">*</span></label>
                            <span class="required text-danger">（请使用真实邮箱地址，方便及时接收评论回复！）</span>
                        <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                        <div class="OwO" style="display: inline;"></div><div class="OwO" style="display: inline;"><a href="javascript:addNumber('滴！访客卡！请上车的乘客系好安全带，现在是：')" class="OwO-logo"><i class="fontello fontello-user face"></i><span class="OwOlogotext">打卡</span></a></div>
                        <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
                        data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
                            <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
                            <div class="secret_comment_check">
                                <label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
                                    <input type="checkbox" id="secret_comment_checkbox">
                                    <i></i>
                                </label>
                            </div>
                        </div>
                    </div>

第二步：在后台 --> 设置外观 --> 开发者设置 --> 自定义JavaScript 加入以下代码:

function addNumber(a) {
        var b = (new Date).toLocaleDateString()
        var c = (new Date).toLocaleTimeString()
        var length = document.getElementById("comment").value.length;
        if (length > 0) {
            document.getElementById("comment").focus()
            document.getElementById("comment").value += '\n' + a + b + c
        } else {
            document.getElementById("comment").focus()
            document.getElementById("comment").value += a + b + c
        }
    }

第三步：在后台 --> 设置外观 --> 开发者设置 --> 自定义CSS 加入以下代码:

/*一键评论打卡css代码*/
.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

此时，已完成所有所需步骤，刷新网页即可看到新的评论效果！

转自https://wuqintai.com/archives/2058.html

首页头像转动并放大

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

头像呼吸光环

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

文章内打赏图标跳动

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

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

    to {
        transform: scale(1.1);
    }
}

首页文章版式圆角化

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

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

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

首页文章版式阴影化

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

图片抖动效果

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

自定义滚动条滑块

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-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;
}

文章标题居中

.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

自定义鼠标样式

body {
    cursor:url('鼠标指针图片链接'), auto;
}
select, input, textarea, a, button {
    cursor:url('鼠标指针图片链接'), auto;
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly] {
    cursor:url('鼠标指针图片链接'), auto;
}

复制成功提示

复制成功提示
使用方法：

复制下面代码到 handsome主题>设置外观>开发者设置>自定义 JavaScript

 /* 复制成功提示代码开始 */ 
        kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
    $.message({
        message: "尊重原创，转载请注明出处！<br> 本文作者：小小孩子们<br>原文链接："+sitesurl,
        title: "复制成功",
        type: "warning",
        autoHide: !1,
        time: "5000"
        })
    }}
    /* 复制成功提示代码结束 */

Handsome底部页脚标签

添加自定义css

添加代码至后台>自定义 CSS

/*页脚标签样式*/ 
.github-badge {
    display: inline-block;
    border-radius: 2px;

    text-shadow: none;
    font-size: 10px;
    color: #fff;
    line-height: 13px;

    background-color: #ABBAC3;

    margin-bottom: 3px;
}

.github-badge .badge-subject {
    display: inline-block;
    background-color: #4D4D4D;
    padding: 2px 2px 2px 3px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.github-badge .badge-value {
    display: inline-block;
    padding: 2px 3px 2px 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.github-badge .bg-brightgreen {
    background-color: #4c1 !important;
}
.github-badge .bg-green {
    background-color: #97CA00 !important;
}
.github-badge .bg-yellow {
    background-color: #dfb317 !important;
}
.github-badge .bg-zise {
    background-color:#F08080 !important;
}
.github-badge .bg-orange {
    background-color: #fe7d37 !important;
}
.github-badge .bg-red {
    background-color: #e05d44 !important;
}
.github-badge .bg-blue {
    background-color: #007ec6 !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
    background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
    background-color: #9f9f9f !important;
}

选择显示位置

打开Handsome主题设置>博客底部左侧信息添加以下代码

<a class="github-badge">
     <span class="badge-subject">Copyright</span>
     <span class="badge-value bg-brightgreen">XXX</span>
</a>
|
<a class="github-badge" target="_blank" href="https://beian.miit.gov.cn">
     <span class="badge-subject">鲁ICP备</span>
     <span class="badge-value bg-red">2021028951号</span>
</a>

打开 Handsome主题设置>博客底部右侧信息添加以下代码

<a class="github-badge" target="_blank" href="https://www.ihewro.com/">
     <span class="badge-subject">Themes</span>
     <span class="badge-value bg-blue">Handsome</span>
</a>
|
<a class="github-badge" target="_blank" href="https://typecho.org">
     <span class="badge-subject">Powered</span>
     <span class="badge-value bg-orange">Typecho</span>
</a>

删除多余代码

位置在125-140行之间
删除usr/themes/handsome/component/footer.php中以下代码

Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="_blank"
                                                                                                     href="https://www.ihewro.com/archives/489/">handsome</a>

© <?php echo date("Y"); ?> Copyright

点击飘出二十四字核心价值观

/* 鼠标特效 */
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(); 
        }); 
    }); 
})

更换HarmonyOS字体

1.安装AliceStyle插件
2.下载HarmonyOS字体-HarmonySanc

这是官方开放开发文档，大家可以自行下载，不过我已经将.ttf文件上传到jsdeliver上了，大家最后引用一下就可以了！
3.开启插件并使用字体

jsdeliver储存云端字体Sanc地址

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

转自小屁的博客

博主介绍打字效果

<span class="text-muted text-xs block"> <div id="chakhsu"></div>  <script> var chakhsu = function (r) { function t() {     return b[Math.floor(Math.random() * b.length)]}  function e() {     return String.fromCharCode(94 * Math.random() + 33) }  function n(r) {     for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {          var l = document.createElement("span");          l.textContent = e(), l.style.color = t(), n.appendChild(l)  }  return n } function i() {     var t = o[c.skillI];      c.step ? c.step-- : (c.step = g, c.prefixP < l.length ?      (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ?                 c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ?  c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ?  (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ?  Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)  }   var l = "", o = ["这里填写介绍" ].map(function (r) {return r + ""}), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g};  i() };      chakhsu(document.getElementById('chakhsu'));      </script>  </span>  </span>

插件推荐

AliceStyle 一款超强大的handsome美化插件，还支持后台美化

Sitemap 生成sitemap的插件，自带百度推送

InvalidLinks handsome友链失效检查

Copyright 利用自定义字段功能灵活地在文章或独立页面尾部显示版权小尾巴。

版权属于：小小孩子们
本文链接：https://www.xxhzm.cn/archives/152/
转载时须注明出处及本声明

最后修改：2021 年 11 月 15 日 04 : 28 PM

如果觉得我的文章对你有用，请随意赞赏

30 条评论

不知名的男士
November 27th, 2021 at 02:57 pm

滴！访客卡！请上车的乘客系好安全带，现在是：2021/11/27下午2:56:54

回复
YANG
November 15th, 2021 at 04:22 pm

滴！浏览功勋卡

回复
ZMR
November 14th, 2021 at 06:00 pm

小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小孩子们

回复
cqh91
November 8th, 2021 at 05:41 pm

滴！访客卡！请上车的乘客系好安全带，现在是：2021/11/8下午5:41:43

回复
liu
November 4th, 2021 at 11:22 am

字体字体

回复
1. xiaoxiao
  November 4th, 2021 at 11:22 am
  
  @liu
  
  字体字体
  
  回复
liu
November 4th, 2021 at 11:21 am

666

回复
陌易
November 2nd, 2021 at 10:54 am

小小小小小孩子

回复
呜哇
October 20th, 2021 at 04:17 pm

滴！访客卡！请上车的乘客系好安全带，现在是：2021/10/20下午4:16:43

回复
小超人
October 11th, 2021 at 11:24 pm

666666666666666666

回复
大大孩子们
October 10th, 2021 at 06:55 pm

很棒很棒

回复
若志奕鑫
October 5th, 2021 at 01:13 pm

取个字体

回复
黑皮蛋
October 3rd, 2021 at 06:11 pm

西皮狐妖

回复
xiaoxiao
October 2nd, 2021 at 10:30 am

滴！访客卡！请上车的乘客系好安全带，现在是：Sat Oct 02 2021 10:30:43 GMT+0800 (GMT+08:00)

回复
1. 鲸之声
  November 20th, 2021 at 05:36 pm
  
  @xiaoxiao
  
  我已经把你的网站链接加到我的网站了，你也加一下我的
  
  回复
  1. xiaoxiao
    November 20th, 2021 at 05:41 pm
    
    @鲸之声
    
    我没找到你的友情链接页面在哪里
    
    回复
    
    鲸之声
    November 20th, 2021 at 05:58 pm
    
    @xiaoxiao
    
    刚刚发一版，你再看一下
    
    回复
    
    xiaoxiao
    November 20th, 2021 at 06:18 pm
    
    @鲸之声
    
    为啥你的友链还得注册才能访问
    
    回复
    
    鲸之声
    November 20th, 2021 at 07:24 pm
    
    @xiaoxiao
    
    改过了
    
    回复
    
    xiaoxiao
    November 20th, 2021 at 07:27 pm
    
    @鲸之声
    
    看到了，看到了，麻烦你去 https://www.xxhzm.cn/links.html 下面评论一下你的网站信息，我没在友链页面找到
    
    回复
    
    鲸之声
    November 20th, 2021 at 06:21 pm
    
    @xiaoxiao
    
    搞错了，我友链数据是调接口获取的，接口加权限了，我重新改一下
    
    回复
永恒
October 1st, 2021 at 12:06 pm

666

回复
1. xiaoxiao
  October 1st, 2021 at 06:32 pm
  
  @永恒
  
  其实你发一遍就可以的
  
  回复
  1. 永恒
    October 1st, 2021 at 06:57 pm
    
    @xiaoxiao
    
    我在你的网站逛了一个小时，兜兜转转忘了
    
    回复
    
    xiaoxiao
    October 1st, 2021 at 06:58 pm
    
    @永恒
    
    回复
永恒
October 1st, 2021 at 12:06 pm

666

回复
潜心学习的大黄
September 29th, 2021 at 08:54 pm

感谢分享OωO

回复
1. 永恒
  October 1st, 2021 at 12:06 pm
  
  @潜心学习的大黄
  
  6666
  
  回复
污萌
September 29th, 2021 at 03:27 pm

我来了OωO借鉴一下

回复
1. xiaoxiao
  September 29th, 2021 at 08:04 pm
  
  @污萌
  
  欢迎欢迎
  
  回复

发表评论取消回复

评论 * （不使用真实邮箱评论，一概不予通过！！！）

打卡

私密评论

名称 *

🎲

邮箱 *

地址

ZMR
滴！访客卡！请上车的乘客系好安全带，现在是：2021/12/9...
ZMR
滴！访客卡！请上车的乘客系好安全带，现在是：2021/12/9...
ZMR
滴！访客卡！请上车的乘客系好安全带，现在是：2021/12/9...
A明
辛苦拉
AHdark
宝塔一点也不香为何不考虑WordPress ヾ(≧∇≦*)ゝ

handsome美化-持续更新

xiaoxiao • 2021 年 08 月 28 日

建议收藏备忘，本文涉及代码操作的地方皆有注释，以便后期修改

这本教程所用方法仅适于Handsome主题，其他主题未尝试

自定义

评论打卡

打卡

是一个记录与互动的巧妙设计。看到网上有部分站长在自己的博客中加入了评论打卡这一功能，个人觉得还不错，于是决定动手魔改一下。

下面是本站引入了一键评论打卡功能的实现过程，请有需要的站长按需"食用"，先看前、后效果：

⚠️ 注意：本教程仅在 Handsome 主题下通过测试，其它平台请自行 DIY 。

第一步：打开 Handsome 主题目录下的 component/comments.php 文件，找到并删除如下内容：

 <div class="comment-form-comment form-group">
                        <label class="padder-v-sm" for="comment"><?php _me("评论") ?>
                            <span class="required text-danger">*</span></label>
                        <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                        <div class="OwO padder-v-sm"></div>
                        <?php $options = mget(); if (in_array('ajaxComment', Utils::checkArray( $options->featuresetup))): ?>
                        <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
                        data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
                            <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
                            <div class="secret_comment_check">
                                <label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
                                    <input type="checkbox" id="secret_comment_checkbox">
                                    <i></i>
                                </label>
                            </div>
                        </div>
                        <?php endif; ?>
                    </div>

接着在相同位置，加入以下 HTML 代码：

<div class="comment-form-comment form-group">
                        <label for="comment"><?php _me("评论") ?> 
                            <span class="required text-danger">*</span></label>
                            <span class="required text-danger">（请使用真实邮箱地址，方便及时接收评论回复！）</span>
                        <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                        <div class="OwO" style="display: inline;"></div><div class="OwO" style="display: inline;"><a href="javascript:addNumber('滴！访客卡！请上车的乘客系好安全带，现在是：')" class="OwO-logo"><i class="fontello fontello-user face"></i><span class="OwOlogotext">打卡</span></a></div>
                        <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
                        data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
                            <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
                            <div class="secret_comment_check">
                                <label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
                                    <input type="checkbox" id="secret_comment_checkbox">
                                    <i></i>
                                </label>
                            </div>
                        </div>
                    </div>

第二步：在后台 --> 设置外观 --> 开发者设置 --> 自定义JavaScript 加入以下代码:

function addNumber(a) {
        var b = (new Date).toLocaleDateString()
        var c = (new Date).toLocaleTimeString()
        var length = document.getElementById("comment").value.length;
        if (length > 0) {
            document.getElementById("comment").focus()
            document.getElementById("comment").value += '\n' + a + b + c
        } else {
            document.getElementById("comment").focus()
            document.getElementById("comment").value += a + b + c
        }
    }

第三步：在后台 --> 设置外观 --> 开发者设置 --> 自定义CSS 加入以下代码:

/*一键评论打卡css代码*/
.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

此时，已完成所有所需步骤，刷新网页即可看到新的评论效果！

转自https://wuqintai.com/archives/2058.html

首页头像转动并放大

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

头像呼吸光环

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

文章内打赏图标跳动

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

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

    to {
        transform: scale(1.1);
    }
}

首页文章版式圆角化

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

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

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

首页文章版式阴影化

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

图片抖动效果

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

自定义滚动条滑块

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-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;
}

文章标题居中

.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

自定义鼠标样式

body {
    cursor:url('鼠标指针图片链接'), auto;
}
select, input, textarea, a, button {
    cursor:url('鼠标指针图片链接'), auto;
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly] {
    cursor:url('鼠标指针图片链接'), auto;
}

复制成功提示

复制成功提示
使用方法：

复制下面代码到 handsome主题>设置外观>开发者设置>自定义 JavaScript

 /* 复制成功提示代码开始 */ 
        kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
    $.message({
        message: "尊重原创，转载请注明出处！<br> 本文作者：小小孩子们<br>原文链接："+sitesurl,
        title: "复制成功",
        type: "warning",
        autoHide: !1,
        time: "5000"
        })
    }}
    /* 复制成功提示代码结束 */

Handsome底部页脚标签

添加自定义css

添加代码至后台>自定义 CSS

/*页脚标签样式*/ 
.github-badge {
    display: inline-block;
    border-radius: 2px;

    text-shadow: none;
    font-size: 10px;
    color: #fff;
    line-height: 13px;

    background-color: #ABBAC3;

    margin-bottom: 3px;
}

.github-badge .badge-subject {
    display: inline-block;
    background-color: #4D4D4D;
    padding: 2px 2px 2px 3px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.github-badge .badge-value {
    display: inline-block;
    padding: 2px 3px 2px 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.github-badge .bg-brightgreen {
    background-color: #4c1 !important;
}
.github-badge .bg-green {
    background-color: #97CA00 !important;
}
.github-badge .bg-yellow {
    background-color: #dfb317 !important;
}
.github-badge .bg-zise {
    background-color:#F08080 !important;
}
.github-badge .bg-orange {
    background-color: #fe7d37 !important;
}
.github-badge .bg-red {
    background-color: #e05d44 !important;
}
.github-badge .bg-blue {
    background-color: #007ec6 !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
    background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
    background-color: #9f9f9f !important;
}

选择显示位置

打开Handsome主题设置>博客底部左侧信息添加以下代码

<a class="github-badge">
     <span class="badge-subject">Copyright</span>
     <span class="badge-value bg-brightgreen">XXX</span>
</a>
|
<a class="github-badge" target="_blank" href="https://beian.miit.gov.cn">
     <span class="badge-subject">鲁ICP备</span>
     <span class="badge-value bg-red">2021028951号</span>
</a>

打开 Handsome主题设置>博客底部右侧信息添加以下代码

<a class="github-badge" target="_blank" href="https://www.ihewro.com/">
     <span class="badge-subject">Themes</span>
     <span class="badge-value bg-blue">Handsome</span>
</a>
|
<a class="github-badge" target="_blank" href="https://typecho.org">
     <span class="badge-subject">Powered</span>
     <span class="badge-value bg-orange">Typecho</span>
</a>

删除多余代码

位置在125-140行之间
删除usr/themes/handsome/component/footer.php中以下代码

Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="_blank"
                                                                                                     href="https://www.ihewro.com/archives/489/">handsome</a>

© <?php echo date("Y"); ?> Copyright

点击飘出二十四字核心价值观

/* 鼠标特效 */
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(); 
        }); 
    }); 
})

更换HarmonyOS字体

jsdeliver储存云端字体Sanc地址

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

转自小屁的博客

博主介绍打字效果

<span class="text-muted text-xs block"> <div id="chakhsu"></div>  <script> var chakhsu = function (r) { function t() {     return b[Math.floor(Math.random() * b.length)]}  function e() {     return String.fromCharCode(94 * Math.random() + 33) }  function n(r) {     for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {          var l = document.createElement("span");          l.textContent = e(), l.style.color = t(), n.appendChild(l)  }  return n } function i() {     var t = o[c.skillI];      c.step ? c.step-- : (c.step = g, c.prefixP < l.length ?      (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ?                 c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ?  c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ?  (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ?  Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)  }   var l = "", o = ["这里填写介绍" ].map(function (r) {return r + ""}), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g};  i() };      chakhsu(document.getElementById('chakhsu'));      </script>  </span>  </span>

插件推荐

版权属于：小小孩子们
本文链接：https://www.xxhzm.cn/archives/152/
转载时须注明出处及本声明

handsome美化-持续更新

自定义

打卡

插件推荐

30 条评论

发表评论取消回复

handsome美化-持续更新

CSS3 Flex布局使用说明

JS点击更换图片

10分钟搭建 Typecho 个人博客教程 - 保姆级教学

JS网页计算器

HTML5、JS使用canvas绘画

10分钟搭建 Typecho 个人博客教程 - 保姆级教学

JavaScript抽奖

linux安装企业版宝塔

ES6箭头函数this指向

handsome美化-持续更新

自定义

打卡

插件推荐

自定义

打卡

插件推荐

30 条评论

发表评论 取消回复

handsome美化-持续更新

自定义

打卡

插件推荐

发表评论取消回复