Ty-Cuteen主题美化汇总

```CSS
/* 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 5s 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;}}
```
[/acc]
[acc status="close" title="网站实现网格背景"]

```CSS
/*网格背景css*/
body {
z-index:1;
    background-position: center top;
    background-size: 28px 28px;
    background-color: #f9f9f9;
    background-image: linear-gradient(to right,rgba(37,82,110, 0.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(37,82,110, 0.1) 1px,transparent 1px);
}
```

[/acc]
[acc status="close" title="网站背景图设置"]
下方代码放后台-自定义CSS
```CSS
/* 背景图片 */
    body::before {
        content: '';
position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      background: url(图片地址);
        background-position: center 0;
        background-size: cover;
        z-index: -1;
        opacity: 0.75;
    }
```

```html
<span>最新回复</span>下面
<span class="ios"></span>
```

```CSS
/*PC端侧栏仿ios小点点*/
.ios {
    content: " ";
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fc625d !important;
    width: 10px;
    height: 10px;
z-index:999;
    -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    box-shadow: 19px 0 #fdbc40, 40px 0 #35cd4b;
    float: right;
    right: 58px;
    top: 22px;
z-index:100;

}
```
[/acc]
[acc status="close" title="评论框图片"]

```CSS
/*评论框图片*/
textarea.form-control {
 resize: vertical;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  margin-bottom: 2px;
  background-image: url(https://xxi.icu/usr/themes/Cuteen/static/img/lin/pinglunbg.webp);
  transition: all 0.25s ease-in-out 0s;
}
```
[/acc]
[acc status="close" title="增加网页右侧联系站长功能"]
HTML放`/body`前
```HTML

<!--右侧联系站长--><a href="链接你的QQ" target="_blank"><div id="qidiana" class="leke"> 
<svg t="1599210542874" class="upload-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16321" width="30" height="30">
<path d="M224.99 512a287.01 287.01 0 1 0 574.02 0 287.01 287.01 0 1 0-574.02 0z" fill="#FFDA33" p-id="16322"></path>
<path d="M659.18375 635.7275c5.61375-6.55875 3.74625-16.86375-2.82375-22.5-6.5475-5.61375-16.86375-3.735-22.48875 2.82375-33.75 37.485-70.30125 55.305-121.86 55.305-51.55875 0-84.375-14.0625-121.87125-55.305-5.625-6.57-15.94125-8.4375-22.5-2.82375-6.57 5.63625-8.4375 15.94125-2.8125 22.5 44.055 49.69125 85.30875 68.43375 147.18375 68.43375 61.86375 0 107.7975-22.48875 147.1725-68.43375zM390.15125 469.8125v-56.25c0-14.99625-12.18375-28.125-28.125-28.125-14.99625 0-28.11375 12.18375-28.11375 28.125v56.25c0 14.99625 12.1725 28.125 28.11375 28.125 14.99625 0 28.125-12.18375 28.125-28.125z m494.94375-59.0625c-42.1875-170.6175-193.10625-297.1575-373.08375-297.1575-179.98875 0-330.9075 126.54-373.10625 297.1575-45 16.875-76.87125 66.555-76.87125 124.68375 0 66.56625 42.1875 121.86 97.4925 130.30875 0 0 0 0.93375 0.945 0.93375h62.80875a339.87375 339.87375 0 0 1-39.375-159.3675c0-186.5475 147.18375-337.4775 328.10625-337.4775s328.08375 150.93 328.08375 337.4775c0 125.60625-66.54375 234.36-165.915 292.48875A54.9 54.9 0 0 0 661.0625 797.91875c-30.9375 0-56.25 25.30125-56.25 56.2275 0 30.94875 25.3125 56.26125 56.25 56.26125 30.92625 0 56.23875-25.3125 56.23875-56.26125 0-4.68-0.93375-9.36-1.87875-13.10625 64.6875-42.1875 117.18-103.12875 148.12875-175.2975 55.29375-9.39375 98.415-63.7425 98.415-130.30875 0-58.12875-32.81625-107.80875-76.87125-124.68375z m-194.985 59.0625v-56.25c0-14.99625-12.18375-28.125-28.11375-28.125-15.0075 0-28.125 12.18375-28.125 28.125v56.25c0 14.99625 12.18375 28.125 28.125 28.125 14.99625 0 28.11375-12.18375 28.11375-28.125z" 
fill="#515151" p-id="16323" data-spm-anchor-id="a313x.7781069.0.i0" class="">
</path></svg> <span>联</span><span>系</span><span>站</span><span>长</span> </div></a>
```

```CSS
/*右边联系站长 css 开始*/
@keyframes shangxa { 0%, 100%, 20%, 50%, 80% { transition-timing-function: cubic-bezier(0.215,.61,.355,1); transform: translate3d(0,0,0); 
} 40%, 43% { transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060); transform: translate3d(0,-10px,0); } 70% { transition-timing-function: 
cubic-bezier(0.755,0.050,0.855,0.060); transform: translate3d(0,-6px,0); } 90% { transform: translate3d(0,-3px,0); } } 
.leke { display: flex; position: fixed; right: 0; top: calc(50% - 103px); flex-direction: column; -webkit-box-align: center;
 align-items: center; color: rgb(255, 255, 255); font-size: 16px; font-weight: 500; line-height: 20px; box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 6px -4px,
  rgba(13, 206, 158, .37) 0px 6px 10px; z-index: 10; overflow: hidden; background: #0dce9e; padding: 12px 6px 12px 7px; border-radius: 7px 1px 1px 7px; transition: height 0.2s ease 0s, top 0.2s ease 0s; } .leke:hover { opacity: .8; } .leke .upload-icon { flex-shrink: 0; width: 28px; height: auto; display: block; margin-bottom: 2px; -webkit-animation: shangxa 2s infinite; animation: shangxa 2s infinite; } @media screen
AND (max-width: 768px) { .leke { display: none; } }
 #qidiana { cursor: pointer; } .class_qidian_wpa { border-radius: 6px !important; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); 
 -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); } 
/*右边联系站长 css 开始*/
```

[/acc]
[acc status="close" title="解决导航栏无法使用emoji表情"]
由于数据库不支持emoji表情
我们可以在根目录直接加，无视数据库
<br>

```html
<ul class="navbar-nav justify-content-start flex-grow-1 pe-3">
                    <?php if ($this->options->CustomMenu) {
                        $source = array();
                        $source = '[' . $this->options->CustomMenu . ']';
                        $source = json_decode($source, true);
                        foreach ($source as $key) {
                            if (empty($key['children'])) {
                                echo Context::MenuTag($key['url'], $key['name']);
                            } else {
                                echo Context::CustomerDropdownMenuTag($this, $key);
                            }
                        }
                    } else {
                        if ($this->options->LabelOrder == 'P-C') {
                            Context::PageEcho($this, $pages, false);
                            Context::CategoryEcho($this, $category, false);
                        } else {
                            Context::CategoryEcho($this, $category, false);
                            Context::PageEcho($this, $pages, false);
                        }
                    }
                    ?>
                </ul>
```

```html
                    <ul class="navbar-nav justify-content-start flex-grow-1 pe-3">
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">⚙️文章分类</a>
<ul class="dropdown-menu"> 

<li class="nav-item"><a class="nav-link text-nowrap" href="路径">⚙️归档处</a></li>
<li class="nav-item"><a class="nav-link text-nowrap" href="路径">⚙️时光机</a></li>
<li class="nav-item"><a class="nav-link text-nowrap" href="路径">⚙️朋友圈</a></li>
<li class="nav-item"><a class="nav-link text-nowrap" href="路径">✍️留言板</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">⚙️更多</a>
<ul class="dropdown-menu"> 
<li><a class="dropdown-item" href="路径">⚙️影视解析</a></li>
<li><a class="dropdown-item" href="路径">⚙️在线音乐</a></li> 
<li><a class="dropdown-item" href="路径">⚙️颜色代码</a></li>
 <li><a class="dropdown-item" href="路径">⚙️实用标签</a></li>
 <li><a class="dropdown-item" href="路径">⚙️情侣小站</a></li>
 <li><a class="dropdown-item" href="路径">⚙️免责声明</a></li>
</ul></li>
</ul>
```

```js
<script>var xxhzmurl = window.location.href;
            if (xxhzmurl.indexOf("xxi.icu") > 0) {//此处采用搜索，防止误判定
            } else {
               alert('警告！检测到该网站为恶意镜像站点，将立即为您跳转到官方站点！');
                window.location.href = 'https://xxi.icu/';//这里填入要跳转的地址
            }
</script>
```

```html
<!-- 开站时间开始 --><span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span> <script language="javascript"> 
    var now = new Date();
    function createtime(){
        var grt= new Date("04/17/2022 00:00:00");/*---这里是网站的启用时间--*/
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24;
        dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
        hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;}
        minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes);
        if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds);
        if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "本站已稳定运行"+dnum+"天";
        document.getElementById("times").innerHTML = hnum + "小时" + mnum + "分" + snum + "秒";
    }
    setInterval("createtime()",250); 
</script> <!-- 开站时间结束 -->
```

```html
<!-- 顶部阅读进度条 --><progress id="content_progress" value="0"></progress>
<script>
document.addEventListener('DOMContentLoaded', function () {
      var winHeight = window.innerHeight,
            docHeight = document.documentElement.scrollHeight,
            progressBar = document.querySelector('#content_progress');
      progressBar.max = docHeight - winHeight;
      progressBar.value = window.scrollY;

      document.addEventListener('scroll', function () {
            progressBar.max = document.documentElement.scrollHeight - window.innerHeight;
            progressBar.value = window.scrollY;
      });
});
</script><!-- 顶部阅读进度条 -->
```

```CSS
/* 阅读进度条 */
#content_progress {
      /* Positioning */
      position: fixed;
      left: 0px;
      top: 50px;
      z-index: 188;
      width: 100%;
      height: 2px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: none;
      background-color: transparent;
      color: #BABABA;
}

#content_progress::-webkit-progress-bar {
      background-color: transparent;
}

#content_progress::-webkit-progress-value {
      background-color: #B8B8B8;/* 修改颜色 */
}

#content_progress::-moz-progress-bar {
      background-color: #BF3EFF;
}
/* 阅读进度条 */
```

```html
<!-- 前台编辑文章 --><?php if($this->user->hasLogin()):?><span style="position: absolute;right: 25px;" class="item"><font size=2>
<a href="<?php $this->options->adminUrl(); ?>write-post.php?cid=<?php echo $this->cid;?>" target="_blank" class="item">编辑文章</a>
</font></span><?php endif;?><!-- 前台编辑文章 --> 
```

[/acc]
[acc status="close" title="认证评论等级"]
<!-- 认证认证认证认证认证 --><?php
$me = md5(strtolower('你的邮箱@qq.com')); //这里填入自己的邮箱
$boy = md5(strtolower('你的邮箱@qq.com')); //这里填入好友的邮箱
$rz = md5(strtolower($comments->mail)); //用于判断邮箱
//博主样式
$str =  '<span class="commentapprove" style="color: #FFF;padding: .035rem .25rem;font-size: 
.65rem;border-radius: .15rem;background-color:#7e7e7e;" >博主</span>';
//好友样式
$str2 =  '<span class="commentapprove" style="color: #FFF;padding: .035rem .25rem;font-size: 
.65rem;border-radius: .15rem;background-color:#7e7e7e;" >基友</span>';
//开始判断
if($me==$rz){
echo $str;            //如果条件成立则输出'博主'样式
}if($boy==$rz){
echo $str2;            //如果条件成立则输出'好友'样式
}
?><!-- 认证认证认证认证认证 -->

```json
<!-- 全站下樱花 -->
<script src="https://www.xxi.icu/usr/themes/Brave/base/js/yinghua.js" type="text/javascript"></script>
```

```json
<!-- 增强PC端下樱花 --><script>if (screen && screen.width >768 ) {
document.write('<script src="https://www.xxi.icu/usr/themes/Brave/base/js/yinghua1.js" type="text/javascript"><\/script>');
}</script>
```

```js
<!-- 底部小鱼跳跃 --><script src="https://www.xxi.icu/usr/themes/Brave/base/js/xiaoyu.js" type="text/javascript"></script>
```

```html
<!--底部小鱼跳跃--><div id="xiaoyu" style="position: relative;height: 160px; bottom: 0px;"></div>
```

```js
<!-- PC端大红灯笼 --><script>if (screen && screen.width >768 ) {
document.write('<script src="https://www.xxi.icu/usr/themes/Brave/base/js/dadenglong.js" type="text/javascript"><\/script>');
}</script>
```

```html
<!--变换标题-->
<script type="text/javascript">
var tx=new Array("欢迎光临","祝你生活愉快","本站随机更新","敬请期待..","闪！！");
var txcount=7;
var i=1;
var wo=0;
var ud=1;
function animatetitle()
{
window.document.title=tx[wo].substr(0,i)+"";
if(ud==0)i--;
if(ud==1)i++;
if(i==-1){ud=1;i=0;wo++;wo=wo%txcount;}
if(i==tx[wo].length+10){ud=0;i=tx[wo].length;}
parent.window.document.title=tx[wo].substr(0,i)+"";
setTimeout("animatetitle()",100);
}
animatetitle();
</script>
<!--变换标题-->
```

```php
<!-- QQ微信引导至浏览器访问 -->
<?php
$conf['qqjump']=1;if(strpos($_SERVER['HTTP_USER_AGENT'], 'QQ/')||strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger')!==false && $conf['qqjump']==1){$siteurl='http://'.$_SERVER['SERVER_NAME'].':'.$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];echo '<html>
<head>
<meta charset="UTF-8">
<title>请使用浏览器访问</title>
<style>
        body,html{width:100%;height:100%}
        *{margin:0;padding:0}
        body{background-color:#fff}
        #browser img{
            width:50px;
        }
        #browser{
            margin: 0px 10px;
            text-align:center;
        }

        .top-bar-guidance{font-size:15px;color:#fff;height:70%;line-height:1.8;padding-left:20px;padding-top:20px;background:url(https://xxi.icu/usr/themes/Cuteen/static/img/lin/fanghong-youshangjiao.webp) center top/contain no-repeat}
        .top-bar-guidance .icon-safari{width:40px;height:40px;vertical-align:middle;margin:0 .2em}
</style>
</head>
<body>
<div class="top-bar-guidance">
<font size=6><p>点击右上角<img src="https://xxi.icu/usr/themes/Cuteen/static/img/lin/fanghong-liulanqi.webp" class="icon-safari"> <span id="openm">，在浏览器打开</span></p>
<p>可以正常访问本站~</p></font>
</div>
</html>';exit; } ?>
<!-- QQ微信引导至浏览器访问 -->
```

```php
<!-- 主页自动黑白哀悼 -->
<?php 
/** 
 * PHP判断一个日期
 */
// 拟设一个日期 
$aday = '2023-02-18 00:00:00'; 
// 截取日期部分，摒弃时分秒，注意类似1月1日应为01-01
$bday = substr($aday,0,10);
// 获取今天的日期，格式为 YYYY-MM-DD 
$cday = date('Y-m-d');
//使用IF当作字符串判断是否相等
if($bday==$cday){
echo <<<EOF
<!--灰白特效-->
<style type="text/css">
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter:none;
}
</style>
<!--灰白特效-->
    <!--弹窗代码开始 -->
    <div class="web_notice" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 99999999;">
    <div style="position: fixed;top: 50%;left: 50%;width: 20%;background: #FFF;transform: translate(-50%, -50%);border-radius: 8px;padding: 30px 24px 28px 24px;">
    <h3 style="font-weight: bold;text-align: center;font-size: 26px;">本 站 公 告</h3><hr>
    <div style="font-size: 18px;margin-top: 24px;line-height: 30px;color: #707070;">清明时节雨纷纷，路上行人欲断魂！<br>
<font size=2 style="position: absolute;right: 30px;">——自动黑白哀悼</font>
</div>
    <a style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 18px;line-height: 45px;margin: 0 auto;margin-top: 60px;border-radius: 80px;width: 29%;" onclick="javascript:document.querySelector('.web_notice').remove()">我知道了</a></div></div>
    <!-- 弹窗代码结束 -->
EOF;
}else{

}
?>
<!-- 主页自动黑白哀悼 -->
```

```CSS
    img{-webkit-animation:ani 2s linear infinite;}@keyframes ani{0%{box-shadow:0 0 0px #00BCD4;}25%{box-shadow:0 0 10px #00BCD4;}50%{box-shadow:0 0 20px #00BCD4;}
    75%{box-shadow:0 0 10px #00BCD4;}100%{box-shadow:0 0 0px #00BCD4;}}
```

```CSS
body img { -webkit-user-drag: none; }
```

```CSS
<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>
```

 ![tg](https://i.imgtg.com/2023/02/25/s291M.webp) 
```html
 <li class="navbar-icon d-none d-md-inline-flex" data-bs-toggle="tooltip"
                data-bs-placement="bottom"
                title="后台管理"><a target="_blank" class="d-md-inline-flex nav-link" href="/admin">
<svg t="1673414371247"  class="icon icon-20 darkMode" aria-hidden="true" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2207" width="16" height="16"><path d="M614.015 562.226H409.928c-191.021 0-346.487 153.046-346.487 341.29v20.07C63.441 1024 216.36 1024 409.928 1024h204.087c185.927 0 346.46 0 346.5-100.413v-20.121c0-188.156-155.48-341.291-346.5-341.291zM501.77 0C350.075 0 226.7 121.566 226.7 271.02s123.323 271.047 275.07 271.047S776.84 420.475 776.84 271.02 653.454 0 501.771 0z" p-id="2208"></path></svg>
            </a></li>
```

```css
<style>
/**自适应显示**/
.sjxs{display: none;}
@media (max-width: 768px){.sjxs{display: block !important;}
.pcxs{display: block;}
@media (max-width: 768px){.pcxs{display: none;}
/**自适应显示**/
</style>
```

```html
<br><li class="nav-item sjxs"><a class="nav-link text-nowrap" target="_blank" href="/admin">⚙️后台管理→</a></li>
```
 ![tg](https://i.imgtg.com/2023/02/25/s2XpD.webp)