主题介绍

一款简约而不简单精心打磨后的 Typecho 主题，精心搭配和设计的纯白色调，适应各个设备和分辨率，十四种色调、多种布局可以随心切换。

美化说明

此次要给大家分享的美化教程是我在网上各处收集到的，其中包括CSS、JavaScript、Php等内容的修改或增加，我也不知道具体的作者是谁，如果此文章内容有侵犯你的权益请联系我修改或删除。

这边我也就不一一为大家展示具体美化效果直接给具体代码吧，你可以自己尝试看看效果也可以修改代码让其更符合你的要求。

CSS美化

使用方法：设置外观→开发者设置→自定义CSS

/* 头像呼吸光环和鼠标悬停旋转放大 */
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}
.img-full:hover {
    transform: scale(1.1) rotate(720deg);
}
@keyframes light {
    0% {
        box-shadow: 0 0 4px #FA7298;
    }
    25% {
        box-shadow: 0 0 16px #FA7298;
    }
    50% {
        box-shadow: 0 0 4px #FA7298;
    }
    75% {
        box-shadow: 0 0 16px #FA7298;
    }
    100% {
        box-shadow: 0 0 4px #FA7298;
    }
}

/* 左侧文章图标和评论头像鼠标悬停旋转 */
.img-square {
    transition: all 0.3s;
}
.img-square:hover {
    transform: rotate(360deg);
}

/* 文章内打赏图标跳动 */
.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 3px 5px 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: 8px;
    transition: 0.5s;
}
#post-content img:hover {
    transform: scale(1.05);
}

/* 定义滚动条高宽及背景 横竖滚动条的尺寸 */ 
::-webkit-scrollbar {
    width: 8px;
    height: 6px  
}
/* 定义滚动条轨道 */ 
::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}
/* 定义滑块 内阴影+圆角 */ 
::-webkit-scrollbar-thumb {
    background-color: #FA7298;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}

/* logo扫光效果 */
.navbar-brand {
    position: relative;
    overflow: hidden;
    margin: 0px 0 0 0px;
}
.navbar-brand:before {
    content: "";
    position: absolute;
    left: -665px;
    top: -460px;
    width: 200px;
    height: 15px;
    background-color: rgba(255,255,255,.5);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 6s ease-in 0s infinite;
    -o-animation: searchLights 6s ease-in 0s infinite;
    animation: searchLights 6s ease-in 0s infinite;
}
@-moz-keyframes searchLights {
    50% {
        left: -100px;
        top: 0;
    }
    65% {
        left: 120px;
        top: 100px;
    }
}
@keyframes searchLights {
    40% {
        left: -100px;
        top: 0;
    }
    60% {
        left: 120px;
        top: 100px;
    }
    80% {
        left: -100px;
        top: 0px;
    }
}

JS美化

使用方法：设置外观→开发者设置→自定义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": "#FA7298" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
});

/* 浏览器动态标题 */
 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "ico图标地址");
         document.title = '╭(°A°`)╮ 页面崩溃啦 ~ ';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "ico图标地址");
         document.title = '(ฅ>ω<*ฅ) 咦又好了呀 ~ ' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });

/* 彩色标签栏 */
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    };
};

/* 复制成功提示代码 */ 
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: "3000"
    });
}};

其它说明

以上只简单给大家分享了一下我认为比较好的美化代码，有些根据自己喜好也做了相应的修改，
另外再分享一些大佬整理的关于handsome美化的文档合集。