Zibll子比主题悬浮按钮美化
和大家分享个CSS代码美化子比主题自带的悬浮按钮样式把，其实就是把它自带的按钮改变成彩色按钮也没啥，所以这篇教程非常的简单，看教程吧。
直接把下面代码放在子比主题后台自定义CSS代码，然后这里我就不多说了，相信用子比主题的人，这个都会弄这个东西，这里注意的是如果放了还不显示效果就是这个CSS和其他的CSS代码有冲突，自己排查下就可以了。
/*自定义子比浮窗样式*/
.wiiuii-zbfc-sty{display:flex;flex-direction:column;align-items:center;justify-content:center}
.wiiuii-zbfc-img{border-top-left-radius:8px;border-top-right-radius:8px}
.wiiuii-zbfc-sty>a{width:100%}
.wiiuii-zbfc-btn{color:#000;text-align:center;background:linear-gradient(288deg,#ffb6b9 0,#ffb6b9 35%,#fae3d9 calc(35% + 1px),#fae3d9 45%,#bbded6 calc(45% + 1px),#bbded6 65%,#61c0bf calc(65% + 1px),#61c0bf 100%);width:100%;padding:10px;margin-top:5px;border-bottom-right-radius:8px;border-bottom-left-radius:8px}
.wiiuii-zbfc-btn:hover{color:#fff;background:linear-gradient(123deg,#461b93 0,#461b93 40%,#6a3cbc calc(40% + 1px),#6a3cbc 60%,#8253d7 calc(60% + 1px),#8253d7 70%,#f78f1e calc(70% + 1px),#f78f1e 100%)}添加滚动播报小工具
只需在后台—>外观—>小工具—>自定义HTML添加下面的代码，把它放在合适的位置（本站放在侧边栏），然后就可以啦。
<style type="text/css">
#container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px;line-height:50px;text-align:center;padding: 10px;background: linear-gradient(45deg, #C7F5FE 10%, #C7F5FE 40%, #FCC8F8 40%, #FCC8F8 60%, #EAB4F8 60%, #EAB4F8 65%, #F3F798 65%, #F3F798 90%);border-radius: var(--main-radius);}
#flip-box-1{overflow:hidden;height:50px;border-radius:99px}
#flip-box-1 div{height:50px}
#flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%}
#flip-box-1 div:first-child{animation:show 8s linear infinite}
.flip-box-1-1{background-image:linear-gradient(to right,#fa709a 0,#fee140 100%)}
.flip-box-1-2{background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);}
.flip-box-1-3{background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);}
.flip-box-1-4{background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);}
.flip-box-1-5{background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);}
.flip-box-1-6{background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);}
@keyframes show{0%{margin-top:-300px}
5%{margin-top:-250px}
16.666%{margin-top:-250px}
21.666%{margin-top:-200px}
33.332%{margin-top:-200px}
38.332%{margin-top:-150px}
49.998%{margin-top:-150px}
54.998%{margin-top:-100px}
66.664%{margin-top:-100px}
71.664%{margin-top:-50px}
83.33%{margin-top:-50px}
88.33%{margin-top:0}
99.996%{margin-top:0}
100%{margin-top:300px}
}
</style>
<div id="container-box-1">
<div class="container-box-1-1"><svg class="icon" aria-hidden="true"><use xlink:href="#iconxiangwenbiaoqing"></use></svg> 坚持每天来逛逛，会让你 <svg class="icon" aria-hidden="true"><use xlink:href="#iconpaomeiyanbiaoqing"></use></svg></div>
<div id="flip-box-1"><div><div class="flip-box-1-1">生活也美好了！</div>
</div><div><div class="flip-box-1-2">心情也舒畅了！</div></div>
<div><div class="flip-box-1-3">走路也有劲了！</div></div><div>
<div class="flip-box-1-4">腿也不痛了！</div></div>
<div><div class="flip-box-1-5">腰也不酸了！</div></div>
<div><div class="flip-box-1-6">工作也轻松了！</div></div>
</div><div class="container-box-1-2"><svg class="icon" aria-hidden="true"><use xlink:href="#iconkaixinbiaoqing"></use></svg> 你好我也好，不要忘记哦! <svg class="icon" aria-hidden="true"><use xlink:href="#icondaxiaobiaoqing"></use></svg></div></div>网站底部通用美化代码
网站通用代码，底部美化css代码，代码内有注释解释，可自由搭配颜色和图案，精简代码，增快访问速度。
HTML代码
放在适当位置： WordPress为footer.php中即可
<!--网站底部自定义链接 -开始-->
<div class="github-badge">
<span class="badge-subject bg-blue">
<a style="color:#fff" href="链接地址" target="_blank">自行修改文字</a>
</span>-
<span class="badge-subject bg-brightgreen">
<a style="color:#fff" href="链接地址" target="_blank">自行修改文字</a>
</span>-
<span class="badge-subject bg-green">
<a style="color:#fff" href="链接地址" target="_blank">自行修改文字</a>
</span>-
<span class="badge-subject bg-orange">
<a style="color:#fff" href="链接地址" target="_blank">自行修改文字</a>
</span>-
<span class="badge-value bg-blueviolet">
<a style="color:#fff" href="链接地址" target="_blank">自行修改文字</a>
</span>-
<span class="badge-value bg-red">
<a style="color:#fff" href="链接地址" target="_blank">自行修改文字</a>
</div>
<!--网站底部自定义链接 -结束-->CSS代码：
/*CSS 网站底部自定义按钮美化开始*/:root{--theme-color:#f04494;--focus-shadow-color:rgba(240,68,148,.4);--mian-max-width:1200px;}.github-badge {
display: inline-block;
border-radius: 4px; text-shadow: none; font-size: 12px; color: #fff; line-height: 15px; margin-bottom: 5px;}.badge-subject {
display: inline-block; background-color: #4d4d4d; padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;}.github-badge .bg-blue {
background-color: #007ec6;}.github-badge .bg-brightgreen {
background-color: #4dc820;}.github-badge .bg-blueviolet {
background-color: #8833d7;}.github-badge .badge-value {
display: inline-block; padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;}.github-badge .bg-orange {
background-color: orange;}.github-badge .bg-red {
background-color: red;}/*CSS 网站底部自定义按钮美化结束*/本站已安全运行代码美化
主题设置→底部页脚→页脚自定义HTML
//开始
<font color="#e955fd"><b>本站已安全运行:</b></font>
<span id="momk"></span>
<script language=javascript>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("02-10-2022 12:12:18");//建站日期
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(daysold-e_daysold)*-24;
hrsold=Math.floor(e_hrsold);
e_minsold=(hrsold-e_hrsold)*-60;
minsold=Math.floor((hrsold-e_hrsold)*-60);
seconds=Math.floor((minsold-e_minsold)*-60);
momk.innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒" ;
}
show_date_time();
</script>
</script>
<style>
#momk{animation:change 10s infinite;font-weight:800; }
@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
</style>
// 结束文章标题加上渐变彩色文字
代码
/*文章标题加上渐变彩色文字 开始*/
.item-heading :hover,
.text-ellipsis :hover,
.text-ellipsis-2 :hover,
.links-lists :hover {
background-image: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: maskedAnimation 4s infinite linear;
}
@keyframes maskedAnimation {
0% {
background-position: 0 0
}
100% {
background-position: -100% 0
}
}
/*文章标题加上渐变彩色文字 结束*/文章缩略图添加优雅的动态圆圈
将以下css代码追加保存到主题设置->自定义代码->自定义CSS代码
/*文章缩略图的动态圆圈 开始*/
.item-thumbnail:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0);
transition: background .35s;
border-radius: 8px;
z-index: 2;
max-width: 765px;
margin: 0 auto;
pointer-events: none;
}
.item-thumbnail:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
background: url(图片URL地址);
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 3;
-webkit-transform: scale(2);
transform: scale(2);
transition: opacity .35s,-webkit-transform .35s;
transition: transform .35s,opacity .35s;
transition: transform .35s,opacity .35s,-webkit-transform .35s;
opacity: 0;
pointer-events: none;
}
.item-thumbnail:hover:before {
background: rgba(0,0,0,.5)
}
.item-thumbnail:hover:after {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1
}
/*文章缩略图的动态圆圈 结束*/👋 感谢您的观看！
© 版权声明
THE END