知更鸟主题美化CSS代码大全,让你的知更鸟主题更加个性和美观,下面橘子君整理了美化代码仅供参考。
使用说明:
知更鸟主题不用修改任何文件,将以下css代码添加到【主题选项】-【定制风格】-【自定义样式】中即可,或者自行添加到主题css文件中。
1、页脚彩色横条美化代码
#footer-widget-box {background: #555 url(https://wx2.sinaimg.cn/large/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; } }
如果你的站点使用的是知更鸟主题,上面的CSS美化代码千万别错过。