WP Zibll主题美化代码-芝士无限

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

文章随机彩色标签

/*文章随机彩色标签*/
.article-tags{margin-bottom: 10px}.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.article-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.article-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.article-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.article-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.article-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.article-tags a:hover{background-color: #1B1B1B;color: #FFF}

轮播幻灯片按钮样式美化

/*轮播幻灯片按钮样式美化*/
.swiper-button-next, .swiper-button-prev{height: 70px !important;}.swiper-button-prev{border-top-right-radius: 8px;border-bottom-right-radius: 8px;}.swiper-button-next{border-top-left-radius: 8px;border-bottom-left-radius: 8px;}

昵称流彩效果

/* 昵称流彩效果 */
.display-name{
background-image: -webkit-linear-gradient(90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 100% 600%;
animation: wzw 10s linear infinite;
}
@keyframes wzw {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -300%;
}
}

全站字体美化

/*全站字体美化*/
@font-face{
font-family: 'moe';
src:  url('https://www.***.com/font.ttf');
src:  url('https://www.***.com/font.woff');
}
body{
font-family:'moe';
}
.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.lazyloading:not(.swiper-lazy-loaded){opacity: 0;}@media (max-width:640px) {
    .meta-right .meta-view{
      display: unset !important;
    }
  }

logo扫光

/* 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;}}

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

/*头像呼吸光环和鼠标悬停旋转放大*/
.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;}}

友链logo圆角

/*友链logo圆角*/
.link-only-img img{border-radius: var(--main-radius);}
.link-img img{border-radius: var(--main-radius);}

日间主题背景

/***日间主题模式***/
body {
    background-image: url("https://www.***.com/zao.jpg");
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

夜间主题背景

/***夜间主题模式***/
.dark-theme {
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url("https://www.***.com/wan.jpg");
    background-size: cover;
}

js样式代码

日夜主题切换提示

$(".toggle-theme").click(function() {
var toggleThemeText = "当前为日间模式";
if (!$("body").hasClass('dark-theme')) {
toggleThemeText = "当前为夜间模式";
}
layer.msg(toggleThemeText, {
time: 2000,
anim: 1
});
});

HTML代码

显示实时时间

<html>
<head>
<meta charset="utf-8">
<script>
function showTime(clock){
    var now = new Date();
    var year = now.getFullYear();
    var month= now.getMonth();
    var day = now.getDate();
    var hour = now.getHours();
    var minu = now.getMinutes();
    var second = now.getSeconds();
    month = month+1;
    var arr_work = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
    var week = arr_work[ now.getDay()];
    var time = year+"年"+month+"月"+day+"日 "+ week+" "+hour+":"+minu+":"+second;
    clock.innerHTML="当前时间："+time;
}
window.onload = function(){
    var clock = document.getElementById("clock");
    window.setInterval("showTime(clock)",1000);
  
}
</script>
</head>
<body>
<div id ="clock"></div>
</body>
</html>

收藏小工具

<!---CTRL+D 收藏小工具开始--->
<style type="text/css">
#go-fav {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: #3d3d3d;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1)
}

#go-fav span {
    padding: 5px 10px;
    background: rgba(255, 197, 0, 1);
    border-radius: 5px;
    color: #202020;
    margin: 0 5px
}

#go-fav a {
    color: #aeaeae
}
</style>
<div id="go-fav">想了解更多内容欢迎按<span>Ctrl</span>+<span>D</span>收藏我们 </div>

本站网络名称：芝士无限

本站永久网址：https://izhishi.net

网站侵权说明：本站文章部分内容可能来源于网络，仅供学习参考，如有侵权请联系站长删除。
1 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
3 本站资源大多存储在云盘，如发现链接失效，请联系我们，我们会第一时间更新。

原创内容遵循 Creative Commons 许可协议：CC BY-NC-SA 4.0

THE END