网站前端美化

请注意，本文编写于 1098 天前，最后修改于 341 天前，其中某些信息可能已经过时。

服务器404重定向：

# 重定向404页面
    fastcgi_intercept_errors on;
    error_page 404 /404.html;

数据库覆盖写入：

INSERT INTO `typecho_contents` (`cid`, `title`, `slug`, `created`, `modified`, `text`, `order`, `authorId`, `template`, `type`, `status`, `password`, `commentsNum`, `allowComment`, `allowPing`, `allowFeed`, `parent`, `views`, `likesNum`, `viewsNum`) VALUES
(1164, '关于本站', 'readme', 1547098680, 1579267024, '文章内容', 11, 1, NULL, 'page', 'publish', NULL, 11, '1', '0', '1', 0, 0, 0, 0)
 ON duplicate KEY UPDATE cid = cid;

CSS美化：

/*超链接文字颜色和加粗*/
.comment-content-true a, .wrapper-lg .entry-content a {
    color: #23b7e5;
    border-bottom-color: #7266ba;
    border-bottom: 1px solid #23b7e5;
    word-wrap: break-word;
    word-break: break-all;
    font-weight: bold;
}

/*将回到顶部按钮下移*/
 .topButton {
    top: 640px;
}
 /*左侧文章图标和评论头像圆角化鼠标悬停旋转*/
 .img-square {
    transition: all 0.3s;
    border-radius: 50%;
}

.img-square:hover {
    transform: rotate(360deg);
}
/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}

.vertical-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;
    }
}
/*文章内头图和文章图片悬停放大并将超出范围隐藏*/
.entry-thumbnail {
    overflow: hidden;
}

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

#post-content img:hover {
    transform: scale(1.05);
}
/*首页文章列表头图悬停放大并将超出范围隐藏*/
.index-post-img {
    overflow: hidden;
}

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

.item-thumb:hover {
    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);
}

网页加上灯笼：

<style>
    /*灯笼*/.xian {
    position: absolute;
    top: -20px;
    left: 60px;
    width: 2px;
    height: 20px;
    background: #dc8f03;
}

.deng-box {
    position: fixed;
    top: 20px;
    z-index: 2;
    left: 12%
}

.deng-box1 {
    position: fixed;
    top: 20px;
    right: 12%;
    z-index: 2;
}

.deng-box1 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.9);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}

.deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.9);
    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.2);
    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, 0.2);
    margin: -4px 8px 8px 26px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}

.shui {
    width: 5px;
    height: 40px;
    background: #ffa500;
    border-radius: 0 0 5px 5px;
}

.shui-a {
    margin: -10px 0 0 40px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -20px;
}

.shui-b {
    margin: -35px 0 0 59px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -45px;
}

.shui-c {
    margin: -45px 0 0 77px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -25px;
}

.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 rightright, #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 rightright, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}

.deng-t {
    font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
    font-size: 1.2rem;
    color: #dc8f03;
    font-weight: bold;
    line-height: 85px;
    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)
    }
}

@media screen and (max-width:767px) {
    .deng-box {
        left: -10%
    }

    .deng-box1 {
        left: -20%
    }
}
</style>
<div class="deng-box" id="box-00">
    <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>
        <div class="shui shui-b"></div>
        <div class="shui shui-c"></div>
    </div>
</div>
<div class="deng-box1" id="box-01">
    <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>
        <div class="shui shui-b"></div>
        <div class="shui shui-c"></div>
    </div>
</div>
<script>
    window.onload = function() {
        document.getElementById("box-00").onclick = function() {
            document.getElementById("box-00").style.display = "none";
            document.getElementById("box-01").style.display = "none"
        };
        document.getElementById("box-01").onclick = function() {
            document.getElementById("box-01").style.display = "none";
            document.getElementById("box-00").style.display = "none"
        }
    };
</script>

倒计时：

<style>
.xinnian {
    border: none;
    border-radius: 15px;
    padding: 10px 14px;
    margin: 10px;
    margin-bottom: 20px;
    text-align: center;
    background-color:#fff
}
#t_d{
    color: #982585;
    font-size: 18px;
}
#t_h{
    color: #8f79c1;
    font-size: 18px;
}
#t_m{
    color: #65b4b5;
    font-size: 18px;
}
#t_s{
    color: #83caa3;
    font-size: 18px;
}
</style>
<div class="xinnian">
    <h1><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>0</font><font color=#8C0073>年</font><font color=#75008A>&nbsp;-&nbsp;</font><font color=#5E00A1>新</font><font color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font>
    </h1>
    <center>
        <div id="CountMsg" class="HotDate">
            <span id="t_d">天</span>
            <span id="t_h">时</span>
            <span id="t_m">分</span>
            <span id="t_s">秒</span>
        </div>
    </center>
    <script type="text/javascript"> function getRTime() {
        var EndTime = new Date('2020/01/25 00:00:00');
        var NowTime = new Date();
        var t = EndTime.getTime() - NowTime.getTime();
        var d = Math.floor(t / 1000 / 60 / 60 / 24);
        var h = Math.floor(t / 1000 / 60 / 60 % 24);
        var m = Math.floor(t / 1000 / 60 % 60);
        var s = Math.floor(t / 1000 % 60);
        document.getElementById("t_d").innerHTML = d + " 天";
        document.getElementById("t_h").innerHTML = h + " 时";
        document.getElementById("t_m").innerHTML = m + " 分";
        document.getElementById("t_s").innerHTML = s + " 秒";
    }
    setInterval(getRTime, 1000);
    </script>
</div>

网页评论框加上滑稽表情：

funny 文件夹放于 handsome 主题 usr/img/emotion/ 目录下；
OwO.json 替换原文件，，此 OwO.json 文件位于 usr/ 目录下；
有人说表情默认显示太大，那就加个CSS调和下。

/*滑稽小表情自定义大小*/
.emotion-funny {
    width: 30px;
}
.comment-content-true img.emotion-funny {
    max-width: 100%!important;
}

文字抖动：

/*文字抖动*/
.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);}
}

监测页面复制复制

引入Layer弹出层

<script src="/layer/layer.js" type="text/javascript"></script>

监听鼠标事件

<script src="/layer/layer.js" type="text/javascript"></script>

自定义右键菜单

<!-- 自定义右键 -->
<style type="text/css">
    a {text-decoration: none;}
    div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
    div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
    div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
    div.usercm ul li a{color:#666;padding:0 15px;display:block}
    div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
    div.usercm ul li a i{margin-right:10px}
    a.disabled{color:#c8c8c8!important;cursor:not-allowed}
    a.disabled:hover{background-color:rgba(255,11,11,0)!important}
    div.usercm{background:#fff !important;}
    </style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><a href="https://www.myc.zone"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
        <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li>
        <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li>
        <li><a href="https://myc.zone/friends-link.html"><i class="fa fa-meh-o fa-fw"></i><span>友链添加</span></a></li>
           <li><a href="https://www.myc.zone/messages.html"><i class="fa fa-pencil-square-o fa-fw"></i><span>留言页面</span></a></li>
    </ul>
</div>
<script type="text/javascript">
    (function(a) {
        a.extend({
            mouseMoveShow: function(b) {
                var d = 0,
                    c = 0,
                    h = 0,
                    k = 0,
                    e = 0,
                    f = 0;
                a(window).mousemove(function(g) {
                    d = a(window).width();
                    c = a(window).height();
                    h = g.clientX;
                    k = g.clientY;
                    e = g.pageX;
                    f = g.pageY;
                    h + a(b).width() >= d && (e = e - a(b).width() - 5);
                    k + a(b).height() >= c && (f = f - a(b).height() - 5);
                    a("html").on({
                        contextmenu: function(c) {
                            3 == c.which && a(b).css({
                                left: e,
                                top: f
                            }).show()
                        },
                        click: function() {
                            a(b).hide()
                        }
                    })
                })
            },
            disabledContextMenu: function() {
                window.oncontextmenu = function() {
                    return !1
                }
            }
        })
    })(jQuery);

    function getSelect() {
        "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢！") : document.execCommand("Copy")
    }
    function baiduSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("啊噢...你没还没选择文字呢！") : window.open("https://www.baidu.com/s?wd=" + a)
    }
    $(function() {
        for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
            d = !1;
            break
        }
        d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
    });
    </script>

Client判断

<script>
    $(function(){
        var t = document.createElement("a");
        t.href = document.referrer;
        var msgTitle = t.hostname;
        var name = t.hostname.split(".")[1];
        if("" !== document.referrer){
            switch (name) {
                case 'bing':
                    msgTitle = '必应搜索';
                    break;
                case 'baidu':
                    msgTitle = '百度搜索';
                    break;
                case 'so':
                    msgTitle = '360搜索';
                    break;
                case 'google':
                    msgTitle = '谷歌搜索';
                    break;
                case 'sm':
                    msgTitle = '神马搜索';
                    break;
                case 'sogou':
                    msgTitle = '搜狗搜索';
                    break;
                default:
                    msgTitle =  t.hostname;
            }
        };
        var time = (new Date).getHours();
        var msg = '';
        23 < time || time <= 5 ? msg = "你是夜猫子呀？这么晚还不睡觉，明天起的来嘛？":
        5< time && time <= 7 ? msg = "早上好！一日之计在于晨，美好的一天就要开始了！":
        7< time && time <= 11 ? msg = "上午好！工作顺利嘛，不要久坐，多起来走动走动哦！":
        11< time && time <= 14 ? msg = "中午了，工作了一个上午，现在是午餐时间！":
        14< time && time <= 17 ? msg = "午后很容易犯困呢，今天的运动目标完成了吗？":
        17< time && time <= 19 ? msg = "傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红~":
        19< time && time <= 21 ? msg = "晚上好，今天过得怎么样？":
        21< time && time <= 23 && (msg = "已经这么晚了呀，早点休息吧，晚安~");
        $.ajax({
            type:"get", 
            url:"https://api.gqink.cn/api/v2/UserInfo",  
            data:{type:'json'},
            async:true,   
            success:function(data){
                layer.msg("Hi~ 来自"+ data.data.location+'~<br/>Hi~ 从'+msgTitle+'来的朋友！<br/>使用 '+ data.data.os +"<br/>"+ data.data.browser +' 访问本站！' + '<br/>' + msg);
            }
        }); 
    });
</script>

某网站Sitemap自动提交

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

旋转立方体


    <style>.rect-wrap{position:relative;perspective:2000px;margin-top: -250px;}.cube{width:200px;height:200px;transform-style:preserve-3d;transform-origin:50% 50% 100px;top:5px;}.slide{width:100px;height:100px;position:absolute;background:#000;line-height:100px;text-align:center;color:#fff;font-size:15px;font-weight:bold;}.top{left:50px;top:-50px;transform:rotateX(-90deg);transform-origin:bottom;background:rgba(214,137,16,0.5);}.bottom{left:50px;bottom:-50px;transform:rotateX(90deg);transform-origin:top;background:rgba(26,188,156,0.5);}.left{left:-50px;bottom:50px;transform:rotateY(90deg);transform-origin:right;background:rgba(231,76,60,0.5);}.right{left:150px;bottom:50px;transform:rotateY(-90deg);transform-origin:left;background:rgba(52,152,219,0.5);}.front{left:50px;top:50px;transform:translateZ(100px);background:rgba(244,208,63,0.5);}.back{left:50px;top:50px;transform:translateZ(0);background:rgba(20,143,119,0.5);}@keyframes rotate-frame{0%{transform:rotateX(0deg) rotateY(0deg);}10%{transform:rotateX(0deg) rotateY(180deg);}20%{transform:rotateX(-180deg) rotateY(180deg);}30%{transform:rotateX(-360deg) rotateY(180deg);}40%{transform:rotateX(-360deg) rotateY(360deg);}50%{transform:rotateX(-180deg) rotateY(360deg);}60%{transform:rotateX(90deg) rotateY(180deg);}70%{transform:rotateX(0) rotateY(180deg);}80%{transform:rotateX(90deg) rotateY(90deg);}90%{transform:rotateX(90deg) rotateY(0);}100%{transform:rotateX(0) rotateY(0);}}.cube{animation:rotate-frame 30s linear infinite;margin:auto;}</style><div class="rect-wrap"><div class="cube"><div class="top slide">给排水</div><div class="bottom slide">环境工程</div><div class="left slide">HTML&CSS</div><div class="right slide">Python</div><div class="front slide">PHP</div><div class="back slide">Javascript</div></div></div>

----- END -----

本文作者： Yacan Man
本文链接：https://blog.manyacan.com/archives/1645/
版权声明：本文章采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 。

Web

添加新评论

--------------- 此处无声胜有声~ ---------------

网站前端美化

污水处理基础知识

建筑给水设计

添加新评论

--------------- 此处无声胜有声~ ---------------