本博客美化记录【持续更新】 - 拾柒

展开查看详情

效果演示：
测试.jpg

可用于图片按钮或…
使用方法：

首先给需要颤抖元素加上 class 属性: Pshake

<a class="Pshake">测试.jpg</a> 
<img class="Pshake" src="https://xxx.jpg"> 
<img class="Pshake" style="display: block; margin: 0 auto;" src="/path/to/image" alt="" />

给 Pshake 一个 display 属性 inline-block ，使得元素可以超出父元素颤抖，否则只能原地颤抖。
加上 will-change 属性，开启GPU渲染加速，防止在低性能设备中造成卡顿。will-change 属性可能会造成元素层叠顺序混乱(z-index混乱)过度使用可能造成反向优化!
transform-origin: center center;进行中心定位。这个属性需要在前面加上 -webkit-和 -ms-进行内核适配
animation: name duration timing-function infinite; 四个属性分别为：动画名称、动画多少时间内完成、如何进行动画周期、无限循环

.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; 
}

现在元素的属性就全部设置好了。下面进行动画的帧的制作。动画帧可以按照自己想要的抖动方式进行下面是 sample仅供参考。你可以在动画帧中添加更多。在 translate、rotate、opacity 等等多种属性中进行组合。
关键帧越多抖动越疯狂！

@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);} 
}

高阶抖动~随机关键帧
如上所说【关键帧越多抖动越疯狂！】但是手动写好多好麻烦，不想写啊。而且上面那一串看的头都大。
那么 emmmm.....不写了。
用JS自动生成吧。嗯。下面不解释了，直接放上代码。

function random_keyframes(){ 
    var a='@keyframes Pshake_Crazy{',b='%{transform:translate(',c='px,',d='px) rotate(',e='deg);}', f='0%,100%{transform:translate(0,0) rotate(0);}}',g='',i=1,  
        jitter=30 /*抖动幅度 >=10*/ , level=1 /*抖动程度 1~99*/; 
    function XYRrandom(){ 
        let _xyr_num=((~(Math.random()*jitter))+(~~(Math.random()*jitter)) )/10; 
    return _xyr_num;} 
    for (i; i<100; i+=level) { 
        g=i+b+XYRrandom()+c+XYRrandom()+d+XYRrandom()+e;a=a+g; 
    } 
return a+f;}

打开网页调用上方的函数 random_keyframes()就会随机生成关键帧。这样每次刷新网页、打开网页抖动的频率都不一样了。

展开查看详情

打开心知天气,地址：https://www.seniverse.com/ 进入后配置好，然后点击下方的 生成代码

生成的代码如下：

<div id="tp-weather-widget"></div>
<script>
  (function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[f].q=a[f].q||[]).push(arguments)});a[f].l=+new Date();if(a.attachEvent){a.attachEvent("onload",b)}else{a.addEventListener("load",b,false)}}(window,document,"script","SeniverseWeatherWidget","//cdn.sencdn.com/widget2/static/js/bundle.js?t="+parseInt((new Date().getTime() / 100000000).toString(),10)));
  window.SeniverseWeatherWidget('show', {
    flavor: "slim",
    location: "WS0GHKN5ZP7T",
    geolocation: true,
    language: "auto",
    unit: "c",
    theme: "auto",
    token: "",
    hover: "enabled",
    container: "tp-weather-widget"
  })
</script>

在/usr/themes/Cuteen/base目录中，打开navbar.php文件，将第一行代码添加到第16行下方即可，在<ul class="navbar-nav">标签前面就行。
script标签内的代码放到后台-外观-设置外观-自定义设置-底部自定义内容中

展开查看详情

打开后台-外观-设置外观-自定义设置-复制代码粘贴至自定义Css样式

#comment-textarea {
    background-image:url(https://xxx.png);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:right bottom;
    transition:all 0.25s ease-in-out 0s;
    }
    textarea#comment-textarea:focus{
    background-position-y:120px;
    transition:all 0.25s ease-in-out 0s;
}

展开查看详情

打开后台-外观-设置外观-自定义设置-复制代码粘贴至自定义Css样式

.sidebar-box: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;
}

展开查看详情

打开后台-外观-设置外观-自定义设置-复制代码粘贴至自定义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;
    }
}

展开查看详情

打开后台-外观-设置外观-自定义设置-复制代码粘贴至自定义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);
    }
}

展开查看详情

打开后台-外观-设置外观-自定义设置-复制代码粘贴至 底部自定义内容

<!--浏览器动态标题开始--> 
<script> 
var OriginTitle = document.title; 
var titleTime; 
document.addEventListener('visibilitychange', function () { 
if (document.hidden) { 
$('[rel="icon"]').attr('href', "//file.kaygb.top/static_image/tx.png"); 
document.title = 'ヽ(●-`Д´-)ノ我藏好了哦！'; 
clearTimeout(titleTime); 
} 
else { 
$('[rel="icon"]').attr('href', "//file.kaygb.top/static_image/tx.png"); 
document.title = 'ヾ(Ő∀Ő3)ノ被你发现啦~！' + OriginTitle; 
titleTime = setTimeout(function () { 
document.title = OriginTitle; 
}, 2000); 
} 
}); 
</script> 
<!--浏览器动态标题结束-->

展开查看详情

打开后台-外观-设置外观-自定义设置-复制代码粘贴至自定义Css样式

img.lazy.loaded{
    border-radius: 15px;
    box-shadow: darkgrey 0px 0px 5px 5px;
}

展开查看详情

打开后台-外观-设置外观-自定义设置-复制代码粘贴至自定义Css样式

.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;
}

展开查看详情

预览：

第一步

你需要先下载好你想要更换的字体

网上有很多，我随便找了一个可以免费下载的，方正字体这只是我随机找的网站，评论中有人提示此网站字体可能涉及版权问题，需谨慎，大家可自行选择

第二步

字体转换，浏览器对woff格式的字体比较友好，下载下来的字体一般都是ttf格式的，这个时候就要转换一下，百度也有很多:

第三步

上传字体：在这个目录下/usr/themes/Cuteen/static/font你可以看到有别的字体，只需将你下载的字体上传上去就可以了，我这里随便下载了一个字体取名为mvboli

第四步

① 修改/usr/themes/Cuteen/static/css/app.css中的字体路径，原本为:

@font-face {
    font-family: 'Roman-55';
    src: url('../font/NeueHaasGrotTextRound-55Roman.woff2'); 
   }

将 '../font/NeueHaasGrotTextRound-55Roman.woff2' 修改为 '../font/mvboli.woff2' 即可。

② 修改/usr/themes/Cuteen/static/css/app.css中的字体路径，直接搜索--bs-font-sans-serif，原本为：

:root{
    --radius:6px;
    --bs-font-sans-serif:"Roman-55",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

将 "Roman-55" 修改为 "Mv Boli" 即可。

温馨提示：字体更换渲染或多或少会拖慢网站速度
刷新界面即可食用哦！有问题可留言哦

展开查看详情

打开后台-外观-设置外观-自定义设置-复制代码粘贴至 头部自定义内容

<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://muyu.mobi/"><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://muyu.mobi/links.html"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li>  
           <li><a href="https://muyu.mobi/message.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>

展开查看详情

打开后台-外观-设置外观-自定义设置-复制代码粘贴至 头部自定义内容

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">

在/usr/themes/Cuteen/base/footer.php中，大约48行添加以下代码

<p class="busuzicss" style="font-size:14px;"><span id="busuanzi_container_site_pv" style="margin-right:3px"><i class="fa fa-users" aria-hidden="true" style="margin-right:5px"></i><span id="busuanzi_value_site_uv"></span>人</span> | <span id="busuanzi_container_site_pv" style="margin-left:3px"><i class="fa fa-eye" aria-hidden="true" style="margin-right:5px"></i><span id="busuanzi_value_site_pv"></span>次</span></p>

展开查看详情

前言

方法还是 F12 Mashiro大佬博客的，和大佬博客展示的一毛一样 (:зゝ∠)
用了 CSS自定义字体 + 大佬博客爬到的CSS ，Mashiro大佬用的字体包只有 “樱花庄的白猫” 这几个字，所以字体包只能自己百度喜欢的啦（注意版权问题哦）！

开工

首先找到一款你想要的字体，我这里用的萝莉小猫咪体。由于中文字体包都很大不利于WEB环境，这里我们需要使用 Fontmin，从字体包里提取出我们要使用的字体。
下载 Fontmin客户端和你要用的字体包

生成完成后会有个文件夹，将文件夹复制到 /usr/themes/Cuteen/static/font 目录下，文件夹重命名为你自己想要的名字，这里我用的是 LOGO

打开后台-外观-设置外观-自定义设置-复制代码粘贴至 头部自定义内容

引用上面文件里的 miao.css 文件

<link rel="stylesheet" type="text/css" href="/usr/themes/Cuteen/static/font/LOGO/miao.css">

在/usr/themes/Cuteen/base中，打开navbar.php文件
将第13行的代码删除掉，并添加以下代码

<li class="navbar-nav">
        <span class="logolink miao">
            <a href="https://blog.slienca.top/">
                <ruby>
                    <span class="sakuraso">拾柒</span>
                    <span class="no">の</span>
                    <span class="shironeko">小屋</span>
                    <rp></rp><rt class="mvboli"><font color="orange">Fenggu's Blog</font></rt><rp></rp></ruby>
                    <i class="up-new" style="display:inline-block;vertical-align: middle;height: 35px;"></i>
            </a>
        </span>
</li>

打开后台-外观-设置外观-自定义设置-复制代码粘贴至自定义Css样式

/*自定义logo*/
.up-new { 
    padding-right: 30px; 
    padding-bottom: 5px; 
    background: url(https://xxx.png) no-repeat; 
}

.miao {
    font-family: 'miao', 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;
}

.mvboli {
    font-family: 'mvboli', 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;
}
 
.logolink .sakuraso {
    background-color: rgba(255, 255, 255, .5);
    border-radius: 5px;
    color: #464646;
    height: auto;
    line-height: 25px;
    margin-right: 0;
    padding-bottom: 0px;
    padding-top: 1px;
    text-size-adjust: 100%;
    width: auto;
}
 
.logolink a:hover .sakuraso {
    background-color: orange;
    color: #fff;
}
 
.logolink a:hover .shironeko {
   color: orange;
}
 
.logolink.miao a {
    color: #464646;
    float: left;
    font-size: 25px;
    font-weight: 800;
    line-height: 56px;
    padding-left: 6px;
    padding-right: 15px;
    text-decoration-line: none;
}

.logolink.miao .sakuraso,.logolink.miao .no {
    font-size: 25px;
    border-radius: 9px;
    padding-bottom: 2px;
    padding-top: 5px;
}

.logolink.miao .no {
    display: inline-block;
    margin-left: 5px;
}

.logolink a:hover .no {
    color: orange;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

.logolink ruby {
    ruby-position: under;
    -webkit-ruby-position: after;
}
 
.logolink ruby rt {
    font-size: 10px;
    letter-spacing:2px;
    transform: translateY(-15px);
    opacity: 0;
    transiton-property: opacity;
    transition-duration: 0.5s, 0.5s;
}

.logolink a:hover ruby rt {
    opacity: 1
}

其中mvboli（Logo底部小标题字体样式）也跟开头处步骤一样，也需引入字体库

若出现导航栏与logo不对齐，则需去/usr/themes/Cuteen/static/css/bootstrap-bc216d3b93.css中，
Ctrl+F搜索.navbar-nav，将其中的margin-bottom:0;去掉即可。

.navbar-nav{
    display:flex;
    flex-direction:column;
    padding-left:0;
    margin-bottom:0;  //去掉
    list-style:none
}

展示

博客首页左上角可见

展开查看详情

在/usr/themes/Cuteen/base目录中，打开navbar.php文件，将以下代码添加到第10行下方即可，在<nav id="navPC">标签前面就行。

<div id="percentageCounter"></div>

打开后台-外观-设置外观-自定义设置-复制代码粘贴至 底部自定义内容

//加载显示
$(window).scroll(function() {
    var a = $(window).scrollTop(),
    c = $(document).height(),
    b = $(window).height();
    scrollPercent = a / (c - b) * 100;
    scrollPercent = scrollPercent.toFixed(1);
    $("#percentageCounter").css({
        width: scrollPercent + "%"
    });
}).trigger("scroll");

打开后台-外观-设置外观-自定义设置-复制代码粘贴至自定义Css样式

#percentageCounter {
    position:fixed;
    left:0;
    top:0;
    height:3px;
    z-index:99999;
    background-color:#448EF6;
}

展开查看详情

打开后台-外观-设置外观-自定义设置-复制代码粘贴至自定义Css样式

@font-face{
    font-family:FontStyle;
    src:url("https://xxx");    //字体URL地址
    format("truetype");
}
*{font-family:FontStyle;}
i{font-family:none;}
@media only screen and (min-width:0px) and (max-width:767px){.index-banner{height:50vh!important;}}

展开查看详情

打开后台-外观-设置外观-自定义设置-复制代码粘贴至 头部自定义内容

<!-- 顶部跑马灯特效 -->
<style>
    #top-grrk{
    background:url(https://external-30160.picsz.qpic.cn/e94ff0137dfb6cc51925d4ccf61d2541);
    height:2px;
    position:fixed;
    width:100%;
    Z-index:10000;
}
</style>    
<div id="top-grrk"></div>
<!-- 顶部跑马灯特效 -->

展开查看详情

示例及效果如下：

这是第一个标签
这是第二个标签
这是第三个标签

打开后台-外观-设置外观-自定义设置-复制代码粘贴至自定义Css样式

#post ul {
margin-top: 0.4rem;
padding: 0 0 0 0.8rem;
list-style: none;
counter-reset: li;
}

#post ul li {
position: relative;
margin: 0.2rem 0;
padding: 0.1rem 0.5rem 0.1rem 1.5rem;
}

#post ul li:hover:before {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

#post ul li:before {
position: absolute;
top: 0;
left: 0;
background: #49b1f5;
color: #fff;
cursor: pointer;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

#post ul > li:hover:before {
border-color: #ff7242;
}
#post ul > li:before {
top: 12.5px;
width: 0.8rem;
height: 0.8rem;
border: 0.2rem solid #49b1f5;
border-radius: 0.4rem;
background: transparent;
content: '';
line-height: 0.3rem;
}

展开查看详情

请移步到https://www.txmmp.cn/index.php/archives/27/

展开查看详情

用压缩包内的 login.php 文件替换掉 /admin/login.php 文件
将压缩包内的 style 文件夹上传到 /admin/ 文件夹下
修改 login.php 第35行，把 Sanerio'Blog 替换成自己的信息
此处内容需要评论回复后方可阅读

展开查看详情

示例及效果如下：

默认情况

success

warning

error

打开后台-外观-设置外观-自定义设置-复制代码粘贴至自定义Css样式

blockquote {
    color: #999;
    padding: 1em;
    border-radius: 1em;
    background: transparent;
    border: 2px #ccc dashed;
}
blockquote {
    margin: 0 0 1em;
    line-height: 1.8;
    font-style: oblique;
    background: transparent;
    padding: 1em 1em 1em 2em;
    border-left: 5px #3498db solid;
}

展开查看详情

一、标签抖动特效

二、给导航栏加上天气

三、给评论框加背景图片

四、给侧边栏加个性图标

五、头像呼吸光环和鼠标悬停旋转放大

六、文章内打赏图标跳动

七、浏览器动态标题

八、图片圆角及阴影化

九、文章边框、评论框、侧边栏圆角及阴影化

十、自定义字体

第一步

第二步

第三步

第四步

十一、右键自定义

十二、博客底部添加访问量

十三、顶部LOGO

前言

开工

展示

十四、滚动条显示位置百分比

十五、全局字体美化

十六、顶部跑马灯特效

十七、美化无序标签

十八、美化集成插件

十九、后台登陆界面美化

二十、美化多彩信息条

二十一、等待编辑