博客前端美化记录(持续更新)

Y5neKO

发布于 2022-01-13 13:18:11

6710

发布于 2022-01-13 13:18:11

0x00 前言

俗话说的好，不会写前端的程序员不是好黑客，我个人对于前端也是非常感兴趣的。抱着对前端的兴趣，我尝试着学过一点点前端知识，无奈从技术和审美两方面的不过关，但这依然阻挡不了我学习前端的热情。本篇文章记录我博客的一些简单的美化，如果能帮到大家，那将是我的荣幸，本文章长期更新

博客信息

程序：Typecho

主题：Cuteen

Version：4.1

作者：@Veen zhao

0x01 底部添加网站运行时间

效果：

首先在function.php中添加以下代码

// 设置时区
date_default_timezone_set('Asia/Shanghai');
/**
 * 秒转时间，格式 年 月 日 时 分 秒
 * 
 * @author Roogle
 * @return html
 */
function getBuildTime(){
    // 在下面按格式输入本站创建的时间
    $site_create_time = strtotime('2010-09-10 00:00:00');
    $time = time() - $site_create_time;
    if(is_numeric($time)){
        $value = array(
            "years" => 0, "days" => 0, "hours" => 0,
            "minutes" => 0, "seconds" => 0,
        );
        if($time >= 31556926){
            $value["years"] = floor($time/31556926);
            $time = ($time%31556926);
        }
        if($time >= 86400){
            $value["days"] = floor($time/86400);
            $time = ($time%86400);
        }
        if($time >= 3600){
            $value["hours"] = floor($time/3600);
            $time = ($time%3600);
        }
        if($time >= 60){
            $value["minutes"] = floor($time/60);
            $time = ($time%60);
        }
        $value["seconds"] = floor($time);
        
        echo ''.$value['years'].'年'.$value['days'].'天'.$value['hours'].'小时'.$value['minutes'].'分';
    }else{
        echo '';
    }
}

然后在要输出的地方调用以下代码：

<?php getBuildTime(); ?>

0x02 侧边栏添加个人主页

效果：

首先在后台自定义css样式中添加以下样式：

/**sidebarcss**/
.sidebar-box-two{
min-height:unset;
}
.social{
display: flex;
    justify-content: space-around;
}
.social img {
   width: 40px;
   height: auto;
   margin: 20px 0;
   border-radius: 50px;
}
.texiao:hover{
transform: scale(1.2);
transition: all .5s;
}

然后在cuteen主题目录下base/sidebar.php中30行左右，侧边栏个人信息div下面添加以下代码（根据个人信息进行修改）：

<div class="sidebar-box sidebar-box-two">
        <div class="social">
                <a href="https://space.bilibili.com/35199034" rel="nofollow" target="_blank"><img src="https://imgcdn.fei05.xyz/imgs/2020/10/87c3e3c0f3c8439c.png"></a>
                <a href="https://github.com/Y5neKO" rel="nofollow" target="_blank" ><img src="https://imgcdn.fei05.xyz/imgs/2020/10/0c47209a8a787a48.png"></a>
                <a href="https://twitter.com/ys_neko" rel="nofollow" target="_blank" ><img src="https://imgcdn.fei05.xyz/imgs/2020/10/86c0facc6d98b96a.png"></a>
                <a href="https://user.qzone.qq.com/1727058834" rel="nofollow" target="_blank" ><img src="https://imgcdn.fei05.xyz/imgs/2020/10/642c35e8fb893b26.png"></a>
       </div>
</div>

0x03 侧边栏添加仿Mac小圆点

效果：

首先，我们在主题css文件中搜索sidebar-box选择器

一共有三处，我们把每一处的样式都复制一份，然后将选择器命名为sidebar-box-2，这一步是为了防止后面要用到的before伪元素影响其他使用了sidebar-box选择器的样式

改完css后，我们在后台自定义css样式中添加以下样式：

/**自定义小圆点**/
.sidebar-box-2:before {
    display:inline-block;
    z-index:1;
    content:" ";
    position:relative;
    -webkit-border-radius:50%;
    border-radius:50%;
    background:#f92900!important;
    width:12px;
    height:12px;
    -webkit-box-shadow:20px 0 #fdbc40,40px 0 #35cd4b;
    box-shadow:20px 0 #fbc606,40px 0 #448ef6;
    float:right;right:55px;top:35px;
    border-color:transparent;
    margin-top:-15px;
}

添加完后我们只要在sidebar.php中需要使用此样式的元素中把sidebar-box改成调用sidebar-box-2这个class就行了（注意不要删掉其他class），例如我在最新回复这里调用：

0x04 侧边栏个人信息实时显示哔哩哔哩粉丝数

效果：

这里可以先参考我之前的两篇文章：

哔哩哔哩api获取用户信息

统计粉丝量代码

Cuteen主题的设置也大同小异；

首先在任意包含主页的php文件中添加以下代码，用以解析api返回的json数据

<?php
//哔哩哔哩粉丝获取
$data = file_get_contents("https://api.bilibili.com/x/relation/stat?vmid=35199034");
$arr = json_decode($data,true);
?>

然后在sidebar.php中27行左右，侧边栏个人信息内添加以下代码：

<div class="sidebar-tags-number"><a href="https://space.bilibili.com/35199034" target="_blank">粉丝<?php echo($arr["data"]["follower"]);?></a></div>

因为直接添加会因为字符过长导致排成两行，我们可以在描述文字后面添加一个br换行符来解决

这样的话还会有一个超链接的下划线，可以使用以下样式取消超链接的下划线

<!--取消a标签下划线-->
<style type="text/css">a {text-decoration:none}</style>

0x05 鼠标样式美化

效果：

见当前博客

直接在后台自定义css样式中添加以下样式即可（可以下载自己要用的鼠标样式）：

/**普通指针样式**/  
body{
    cursor:url(https://cdn.jsdelivr.net/gh/xb2016/kratos-pjax@0.4.4/static/images/cursor.cur),default; 
}  
/**链接指针样式**/  
a:hover{
    cursor:url(https://cdn.jsdelivr.net/gh/xb2016/kratos-pjax@0.4.4/static/images/pointer.cur),pointer;
}

0x06 彩色动态打字机效果

效果：

首先在任意位置添加或引用js：

<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 = ["Walk between the black and white.", ].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>

然后在你想要输出的字体元素上引用chakhsu这个id就行（class请自行匹配），例如我在主页标题下面输出此效果：

<p id="chakhsu" class="mt-3 h5 text-white d-flex"></p>

0x07 网站动态标题

效果：

在任意引用位置或后台底部自定义内容添加以下js代码：

<!--动态标题-->
<script>
//崩溃欺骗
var OriginTitle = document.title;
var titleTime;
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
document.title = "╭(°A°)╮ 页面崩溃啦 ~";
clearTimeout(titleTime);
} else {
document.title = "(ฅ>ω<*ฅ) 噫又好了~" + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
</script>

0x08 头像呼吸光环及旋转效果

效果：

在后台自定义css样式中添加以下样式：

/**头像旋转呼吸光环**/
.friends-img.mr-2.lazy.loaded:hover{
transform:rotate(360deg);
}
.comment-avatar:hover{
transform:rotate(360deg);
}
.sidebar-comment-avatar.mr-1:hover{
transform:rotate(360deg);
}
.friends-img.mr-2.lazy.loaded,.comment-avatar,.sidebar-comment-avatar.mr-1 {
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: all 0.5s;
}
@keyframes light {
    0% {
        box-shadow: 0 0 4px #ff1354;
    }
    25% {
    box-shadow: 0 0 16px #1ebbff;
    }
    50% {
    box-shadow: 0 0 4px #0ed39f;
    }
    75% {
    box-shadow: 0 0 16px #4fe7f4;
    }
    100% {
    box-shadow: 0 0 4px #f35444;
    }
}

0x09 文章和图片圆角和阴影效果

效果：

在后台自定义css样式中添加以下样式（圆角弧度和阴影大小可修改）：

/**圆角阴影**/
img.lazy.loaded{
    border-radius: 15px;
    box-shadow: darkgrey 0px 0px 5px 5px;
}
.post-ctx,.post-comment.mt-4,.sidebar-box {
    background-clip: border-box;
    border-radius: 15px;
    box-shadow: -2px 8px 17px 0 rgb(157 167 255 / 36%), 0 6px 20px 0 rgb(255 255 255 / 19%);
}
.sidebar-banner{
    border-radius: 20px 20px 0px 0px;
}

0x10 点赞打赏图标跳动（要恰饭的嘛）

效果：

见文章底部

后台自定义css样式添加以下样式：

/**点赞打赏跳动**/
#like.btn.btn-outline-primary.rounded-pill.align-items-center.d-inline-flex,#headingMoney.btn.btn-outline-primary.rounded-pill.align-items-center.d-inline-flex {
    animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

0x11 页面元素跳动

效果：

见本博客Logo效果

在后台自定义css样式添加以下样式：

/**页面元素抖动**/
.Pshake{ 
   display: inline-block; 
   will-change: transform; /*可以删除*/ 
   -webkit-transform-origin: center center; 
   -ms-transform-origin: center center; 
   transform-origin: center center; 
   -webkit-animation: Pshake_Crazy 1s ease-in-out infinite; 
   animation: Pshake_Crazy 1s ease-in-out infinite; 
}
@keyframes Pshake_Crazy{ 
    10%{transform:translate(-0.5px,-0.5px) rotate(0.5deg);} 
    20%{transform:translate(-0.5px,1.5px) rotate(0.5deg);} 
    30%{transform:translate(1.5px,0.5px) rotate(0.5deg);} 
    40%{transform:translate(1.5px,-0.5px) rotate(-0.5deg);} 
    50%{transform:translate(2.5px,1.5px) rotate(1.5deg);} 
    60%{transform:translate(-0.5px,-0.5px) rotate(-0.5deg);} 
    70%{transform:translate(-0.5px,2.5px) rotate(1.5deg);} 
    80%{transform:translate(2.5px,-1.5px) rotate(-0.5deg);} 
    90%{transform:translate(1.5px,-0.5px) rotate(1.5deg);} 
    0%,100%{transform:translate(0,0) rotate(0);} 
}

然后在需要此效果的元素里调用Pshake类就行了

0x12 给文字添加抖音效果

效果：

见本博客大标题效果

首先通过css实现静态效果，通过css选择器添加text-shadow属性就行；

在后台主题自定义css样式添加以下样式：

/**抖音文字**/
.tiktok{
    text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
    animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

静态效果弄出来了，我们通过css设计一个动画来达到动态效果：

@keyframes shake-it{
    0%{
        text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5);
    }
    25%{
        text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
    }
    50%{
        text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);
    }
    100%{
        text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5);
    }
}

然后在需要此效果的元素中添加tiktok类就行了

0x13 给网站挂一个灯笼

因为快要过年了嘛，所以我们可以给自己的网站也挂上灯笼，看上去多喜庆

效果：

见我的博客顶部

在主题的footer.php文件的body标签以内添加以下代码，css+html代码如下：

<!-- 灯笼样式开始 -->
<style>
   
    @media only screen and (max-width: 760px) {
        .deng-box, .deng-box1 {
            display:none;
        }
    }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .right {
            float: left!important;
        }
    }
    .deng-box {
        position: fixed;
        top: 20px;
        left: 10px;
        z-index: 3;
    }
    .deng-box1 {
        position: fixed;
        top: 20px;
        right: 10px;
        z-index: 3;
    }
    .deng-box1 .deng {
        position: relative;
        width: 120px;
        height: 90px;
        margin: 50px;
        background: #d8000f;
        background: rgba(216, 0, 15, 0.8);
        border-radius: 50% 50%;
        -webkit-transform-origin: 50% -100px;
        -webkit-animation: swing 5s infinite ease-in-out;
        box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
    }
    .deng {
        position: relative;
        width: 120px;
        height: 90px;
        margin: 50px;
        background: #d8000f;
        background: rgba(216, 0, 15, 0.8);
        border-radius: 50% 50%;
        -webkit-transform-origin: 50% -100px;
        -webkit-animation: swing 3s infinite ease-in-out;
        box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
    }
    .deng-a {
        width: 100px;
        height: 90px;
        background: #d8000f;
        background: rgba(216, 0, 15, 0.1);
        margin: 12px 8px 8px 10px;
        border-radius: 50% 50%;
        border: 2px solid #dc8f03;
    }
    .deng-b {
        width: 45px;
        height: 90px;
        background: #d8000f;
        background: rgba(216, 0, 15, 0.1);
        margin: -4px 8px 8px 26px;
        border-radius: 50% 50%;
        border: 2px solid #dc8f03;
    }
    .xian {
        position: absolute;
        top: -20px;
        left: 60px;
        width: 2px;
        height: 20px;
        background: #dc8f03;
    }
    .shui-a {
        position: relative;
        width: 5px;
        height: 20px;
        margin: -5px 0 0 59px;
        -webkit-animation: swing 4s infinite ease-in-out;
        -webkit-transform-origin: 50% -45px;
        background: #ffa500;
        border-radius: 0 0 5px 5px;
    }
    .shui-b {
        position: absolute;
        top: 14px;
        left: -2px;
        width: 10px;
        height: 10px;
        background: #dc8f03;
        border-radius: 50%;
    }
    .shui-c {
        position: absolute;
        top: 18px;
        left: -2px;
        width: 10px;
        height: 35px;
        background: #ffa500;
        border-radius: 0 0 0 5px;
    }
    .deng:before {
        position: absolute;
        top: -7px;
        left: 29px;
        height: 12px;
        width: 60px;
        content: " ";
        display: block;
        z-index: 999;
        border-radius: 5px 5px 0 0;
        border: solid 1px #dc8f03;
        background: #ffa500;
        background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
    }
    .deng:after {
        position: absolute;
        bottom: -7px;
        left: 10px;
        height: 12px;
        width: 60px;
        content: " ";
        display: block;
        margin-left: 20px;
        border-radius: 0 0 5px 5px;
        border: solid 1px #dc8f03;
        background: #ffa500;
        background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
    }
    .deng-t {
        font-family: 华文行楷;
        font-size: 26px;
        color: #dc8f03;
        font-weight: bold;
        line-height: 44px;
        text-align: center;
    }
    .night .deng-t,
    .night .deng-box,
    .night .deng-box1 {
        background: transparent !important;
    }
    @-moz-keyframes swing {
        0% {
                -moz-transform: rotate(-10deg)
        }
        50% {
             -moz-transform: rotate(10deg)
        }
        100% {
                -moz-transform: rotate(-10deg)
        }
    }
    @-webkit-keyframes swing {
        0% {
                -webkit-transform: rotate(-10deg)
        }
        50% {
                -webkit-transform: rotate(10deg)
        }
        100% {
                -webkit-transform: rotate(-10deg)
        }
    }
</style>
<div class="deng-box">
        <div class="deng">
            <div class="xian"></div>
            <div class="deng-a">
                <div class="deng-b"><div class="deng-t">喜迎</div></div>
            </div>
            <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
        </div>
    </div>
<div class="deng-box1">
        <div class="deng">
            <div class="xian"></div>
            <div class="deng-a">
                <div class="deng-b"><div class="deng-t">新春</div></div>
            </div>
            <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
        </div>
    </div>
<!-- 元宵节灯笼样式结束 -->

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020年12月18日，如有侵权请联系 cloudcommunity@tencent.com 删除

css

php

api

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

php

api

登录后参与评论

0 条评论

热度