子比主题美化教程(备忘录)

• 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 6s 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;}}

• CSS代码：

/*导航栏字体加粗*/
ul.nav {font-weight: 700;}

• CSS代码：

/*头像呼吸光环和鼠标悬停旋转放大*/
.avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar: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;}}

• CSS代码：

/*首页文章列表悬停上浮*/
@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.3s;}.tab-content .posts-item:not(article):hover{transform: translateY(-10px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}

• CSS代码：

 /** 鼠标样式 开始**/
/** 普通指针样式**/
body{cursor: url(https://a-oss.zmki.cn/img/5ccab616ea9c8.cur), default;}
/** 链接指针样式**/
a:hover{cursor:url(https://a-oss.zmki.cn/img/5ccab63d8fc80.cur), pointer;}
/** 鼠标样式 结束**/

• 网站后台—>外观—>小工具—>自定义HTML，然后添加到合适位置集合即可。
• 代码：

<!--跑马灯公告-->
<style>
  #nr{font-size:20px; margin: 0; background: -webkit-linear-gradient(left, #ffffff, #ff0000 6.25%, #ff7d00 12.5%, #ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%, #00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; animation: masked-animation 2s infinite linear;} @keyframes masked-animation{0%{background-position: 0 0;} 100%{background-position: -100%, 0;} }
</style>
    <div style="background-color:#333;border-radius:25px;box-shadow:0px 0px 5px #f200ff;padding:5px;margin-bottom:0px;">
        <marquee>
        <b id="nr">欢迎来到梦境学习站 - 一个乐于免费分享的网站。</b> </marquee>
    </div>

• CSS代码：

/*列表依次进入*/
posts{display: none}.fadeIn{display: block; animation: fadeIn 3s;}@keyframes fadeIn{0%{opacity: 0; transform: translate3d(0, 50px, 0);} 100%{opacity: 1; transform: translate3d(0, 0, 0);}}

• JS代码：

// 列表依次进入
let lis = $('posts');
Array.from(lis).forEach((item, index) => {
    setTimeout(() => {
        $(item).addClass('fadeIn');
    }, 150 * index);
});

两个都要添加，效果可看看本站（需刷新）或自行测试。

• 样式一、

JS代码：

//复制提示
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});};

子比主题设置—>自定义代码—>自定义底部HTML代码,添加以下代码：

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

样式二、

JS代码：

//透明复制提示
document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【 梦境学习站 blog.godgy.xyz 】<br>复制成功，若要转载请务必保留原文链接！</p>', function(){});};

HTML代码：

<!--透明复制提示开始--> 
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<!--上边这个js链接建议大家自己保存一下，做自己的链接，以防失效！--> 
<!--透明复制提示结束--> 

• CSS代码：

/*进度条加载显示*/
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}

• JS代码：

//进度条加载显示
$(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");

• 在主题目录header.php中，添加以下代码，放在body标签下（最后一行）

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