知更鸟主题美化CSS代码大全_生活百科

知更鸟主题美化CSS代码大全知更鸟主题美化CSS代码大全，让你的知更鸟主题更加个性和美观，下面橘子君整理了美化代码仅供参考。
【知更鸟主题美化CSS代码大全】使用说明：
知更鸟主题不用修改任何文件，将以下css代码添加到【主题选项】-【定制风格】-【自定义样式】中即可，或者自行添加到主题css文件中。

文章插图

文章插图
1、页脚彩色横条美化代码
/*彩色滚动美化*/#footer-widget-box {background: #555 url(https://www.zhixinask.com/wp-content/uploads/2021/01/006VCrUsgy1fjmflwl7rog30ag004dfs.gif) repeat-x scroll 0 100%;}2、顶部导航渐变色美化代码
#top-header {background: linear-gradient(-30deg,rgba(255,213,60,.71) 10%,rgba(161,230,243,.78)) no-repeat;border-bottom: 1px solid #dedede;}3、面包屑导航样式美化代码
.breadcrumb{border-width:1px;background-color:rgb(255, 255, 255);margin-Bottom:5px;border-radius:2px;margin-top:5px;}4、顶部菜单样式代码
.shen{background:#b485e2;color:#fff;padding:2px 8px;border-radius:2px}.wu{background:#74d62f;color:#fff;padding:2px 8px;border-radius:2px}5、文章底部分享点赞样式代码
.social-main a {color: #fff;}.like a {background: #f40000;border: 1px solid #f40000;}.share-s a {background: #dd9933;border: 1px solid #dd9933;}.social-main i {color: #fff;}.shang-p a {background: #7ab951;border: 1px solid #7ab951;}.social-main a:hover {color: #fff;background: #666;}.like a:hover, .share-s a:hover, .shang-p a:hover {border: 1px solid #666;}6、文章列表阅读全文样式美化代码
.entry-more a {opacity:0}.post:hover .entry-more a {rightright:0;opacity:1;}.post {transition:all 0.3s ease 0s;}.post:hover {transform:translateY(-3px);z-index:1;-webkit-box-shadow:0 15px 32px rgb(175,135,255)!important;}7、鼠标悬停抖动美化代码
img:hover {-webkit-animation:shenwu 1s .1s ease both;-moz-animation:tada 1s .1s ease both;}@-webkit-keyframes shenwu {0% {-webkit-transform:scale(1)}10%, 20% {-webkit-transform:scale(0.8) rotate(-2deg)}30%, 50%, 70%, 90% {-webkit-transform:scale(1.1) rotate(2deg)}40%, 60%, 80% {-webkit-transform:scale(1.1) rotate(-2deg)}100% {-webkit-transform:scale(1) rotate(0)}8、全站隐藏顶部菜单美化代码
#masthead {height：90px ;}#header-top{ {display: none;}@media only screen and (max-width: 900px) {#masthead {height: 40px;}}9、TAG标签样式美化分两步骤
1.在style.css插入，或主题选项-定制风格-自定义样式
/*标签美化*/.tagcloud{padding:14px 0 14px 12px;}.tagcloud a{float:left;margin:3px;line-height:26px;text-align:center;border:1px solid #ddd;border-radius:2px;padding-top:0;padding-right:5px;padding-bottom:0;padding-left:5px;overflow:hidden;display:block;width:92px;height:28px;}.tagcloud a{color:#fff;}2.在footer.php插入
<script type="text/javascript">box_width = $("#cx_tag_cloud-5").width();len = $(".tagcloud a").length - 1;$(".tagcloud a").each(function(i) {var let = new Array('3366FF', '31ac76', 'ea4563', '31a6a0', '8e7daa', '4fad7b', 'f99f13', 'f85200', '666666');var random1 = Math.floor(Math.random() * 9) + 0;var num = Math.floor(Math.random() * 6 + 9);$(this).attr('style', 'background:#' + let[random1] + '');if ($(this).next().length > 0) {last = $(this).next().position().left}});</script>要记得将3D标签云前面的√去掉
如果你的站点使用的是知更鸟主题，上面的CSS美化代码千万别错过。