本站 Typecho 博客的美化记录

•网络•687 阅•0 评

更换博主认证图标

将comment文件下的comment.php文件的42行的

<span class="comment_admin"><i class="iconfont icon-safetycertificate-f"></i></span>

更换为：

<span class="comment_admin"> <span class="commentapprove" style="color: #ffffff;padding: 2px 4px;font-size: 12px;border-radius: 3px;background-color: #e61919;">博主</span>

更改时间显示格式

更改首页时间显示格式，由X天前改为日期格式，将themes/pigeon/libs/feature 中的//友好时间化//下的代码替换更改为下方代码：

    public static function formatTime($time){
    $text = '';
    $time = intval($time);
    $ctime = time();
    $t = $ctime - $time;
    if ($t > 0) {
        return date('Y-m-d H:i', $time);
    }
}

顶部跑马灯

跑马灯效果图:

特效
特效

GIF跑马灯图下载:

跑马灯代码:

<!-- 顶部跑马灯特效 -->
<style>
 .article-content h2 { margin: 15px 0 15px -20px; padding: 0 25px; border-left: 5px solid #51aded; background-color: #f7f7f7; font-size: 18px; line-height: 40px;}
#top-img {background: url(图片链接.gif格式);height: 4px;top: 0px;position: fixed;width: 100%;Z-index: 9999;}
}
</style>  
<div id="top-img"></div>
<!-- 顶部跑马灯特效 -->

给网站添加安全认证

样式一

样式一
样式一

生成代码：

<div id="cc-myssl-id">
      <a href="https://myssl.com/您的域名?from=mysslid"><img src="https://static.myssl.com/res/images/myssl-id3.png" alt="" style="max-height:50px;display:block;margin:0 auto"></a>
</div>

样式二

样式二
样式二

生成代码：

<div id="cc-myssl-id" style="position: fixed;right: 0;bottom: 0;width: 65px;height: 65px;z-index: 99;">
    <a href="https://myssl.com/您的域名?from=mysslid"><img src="https://static.myssl.com/res/images/myssl-id.png" alt="" style="width:100%;height:100%"></a>
</div>

样式三

样式三
样式三

生成代码：

<div id="cc-myssl-id">
     <a href="https://myssl.com/您的域名?from=mysslid"><img src="https://static.myssl.com/res/images/myssl-id1.png" alt="" style="max-height:50px;display:block;margin:0 auto"></a>
</div>

样式四

样式四
样式四

生成代码：

<div id="cc-myssl-id">
     <a href="https://myssl.com/您的域名?from=mysslid"><img src="https://static.myssl.com/res/images/myssl-id2.png" alt="" style="max-height:50px;display:block;margin:0 auto"></a>
</div>

站点运行时间

效果图：

效果图
效果图

<!--站点运行时间开始--> 
  <div class="zmki_footer_mar">
    <script>
    (function(){
     var bp = document.createElement('script');
     var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
     bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
      }
 else {
 bp.src = 'http://push.zhanzhang.baidu.com/push.js';
 }
 var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
    })();
</script>        
                                                           🔆<font color="blue">本站已运行：</font><SPAN id=span_dt_dt style="color: #2F889A;"></SPAN> 
                                      <script language=javascript>function show_date_time(){
     window.setTimeout("show_date_time()", 1000);
     BirthDay=new Date("06/10/2022 11:13:14 ");
    today=new Date();
     timeold=(today.getTime()-BirthDay.getTime());
         sectimeold=timeold/1000
                secondsold=Math.floor(sectimeold);
                    msPerDay=24*60*60*1000
            e_daysold=timeold/msPerDay
                daysold=Math.floor(e_daysold);
        e_hrsold=(e_daysold-daysold)*24;
    hrsold=Math.floor(e_hrsold);
    e_minsold=(e_hrsold-hrsold)*60;
    minsold=Math.floor((e_hrsold-hrsold)*60);
    seconds=Math.floor((e_minsold-minsold)*60);
 span_dt_dt.innerHTML='<font style=color:＃00BFFF>'+daysold+'</font> 天 <font style=color:＃00BFFF>'+hrsold+'</font> 时 <font style=color:＃00BFFF>'+minsold+'</font> 分 <font style=color:＃00BFFF>'+seconds+'</font> 秒';
     }show_date_time();</script> 
<!--站点运行时间结束-->

鼠标点击特效

效果可见本站特效。

<!--鼠标点击效果-->
<script src="https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@3.0.8/js/maodian.js"></script>

蓝色波浪特效

网站底部动态蓝色波浪特效，效果如本站。

<!--底部波浪开始-->
<div class="wiiuii_layout">
<svg class="editorial"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28"
     preserveAspectRatio="none">
 <defs>
 <path id="gentle-wave"
 d="M-160 44c30 0 
    58-18 88-18s
    58 18 88 18 
    58-18 88-18 
    58 18 88 18
    v44h-352z" />
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>

网站底部

网站底部导航+法律保护提示，下图为样图。

视图
视图

<center>
<!--
<a href="https://cloud.google.com/" target="_blank"  rel="nofollow"><img src="https://img.v7g.cn/23/63b453c3172d1.png" alt="Google Analytics" style="height: 1.0em; "></a>
-->
<a href="https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral"><img src="https://img.v7g.cn/23/63b453c4010a7.png" align="absmiddle" width="59px" height="30px"></a>
<a href="https://www.aliyun.com/" target="_blank" rel="nofollow"><img src="https://img.yunyuwu.cn/y/2022/04/21/626176e808f93.png" alt="Server provider" style="height: 1.0em;"></a>
<a href="https://bt.cn/" target="_blank" rel="nofollow"><img src="https://img.v7g.cn/23/63b45359f0201.png" alt="Google Analytics" style="height: 3em; "></a>
<center>

<section class="banquan-links">
    <p style="text-align: center;">
        <a target="_blank" href="https://www.gov.cn/" rel="nofollow">
            <img style="max-width:60%;overflow:hidden;" src="https://img.v7g.cn/23/63b45303c573e.png" alt="本站受中华人民共和国法律保护">
        </a>
    </p>   

</section></center></center>

新年灯笼特效

“新年快乐”灯笼动态特效，电脑端效果更佳！如下图效果。

视图
视图

<!-- 灯笼代码 -->
<meta charset="utf-8">
<div class="deng-box2">
    <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-box3">
    <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>
<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>
<style type="text/css">
    .deng-box {
        position: fixed;
        top: -40px;
        right: 150px;
        z-index: 9999;
        pointer-events: none;
    }
    .deng-box1 {
        position: fixed;
        top: -30px;
        right: 10px;
        z-index: 9999;
        pointer-events: none
    }
    .deng-box2 {
        position: fixed;
        top: -40px;
        left: 150px;
        z-index: 9999;
        pointer-events: none
    }
    .deng-box3 {
        position: fixed;
        top: -30px;
        left: 10px;
        z-index: 9999;
        pointer-events: none
    }
    .deng-box1 .deng,
    .deng-box3 .deng {
        position: relative;
        width: 120px;
        height: 90px;
        margin: 50px;
        background: #d8000f;
        background: rgba(216, 0, 15, .8);
        border-radius: 50% 50%;
        -webkit-transform-origin: 50% -100px;
        -webkit-animation: swing 5s infinite ease-in-out;
        box-shadow: -5px 5px 30px 4px #fc903d
    }
    .deng {
        position: relative;
        width: 120px;
        height: 90px;
        margin: 50px;
        background: #d8000f;
        background: rgba(216, 0, 15, .8);
        border-radius: 50% 50%;
        -webkit-transform-origin: 50% -100px;
        -webkit-animation: swing 3s infinite ease-in-out;
        box-shadow: -5px 5px 50px 4px #fa6c00
    }
    .deng-a {
        width: 100px;
        height: 90px;
        background: #d8000f;
        background: rgba(216, 0, 15, .1);
        margin: 12px 8px 8px 8px;
        border-radius: 50% 50%;
        border: 2px solid #dc8f03
    }
    .deng-b {
        width: 45px;
        height: 90px;
        background: #d8000f;
        background: rgba(216, 0, 15, .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: orange;
        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: orange;
        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: orange;
        background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #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: orange;
        background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)
    }
    .deng-t {
        font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif;
        font-size: 3.2rem;
        color: #dc8f03;
        font-weight: 700;
        line-height: 85px;
        text-align: center
    }
    .night .deng-box,
    .night .deng-box1,
    .night .deng-t {
        background: 0 0 !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>
网站 美化
最后更新 2024-07-17
评论 ( 0 )
OωO
隐私评论