柒比贰主题B2 Logo增加炫光和放大尺寸 CSS调整

虫子君
虫子君
虫子君
559
文章
260
评论
2019年12月6日15:55:48 2 844 1154字阅读3分50秒

每次看到有人在春哥群里问B2这样那样的设置问题的时候,我就恨不得直接甩个文章过去,吸引一波流量的同时,还能帮助解决问题,最最最主要的是不用回答问题啊!!懒到抽搐!所以我决定每天更新一点B2的小细节设置或者美化,帮助别人,帮助自己!此专题内容不定期更新,其实我争取日更!

柒比贰主题B2 Logo增加炫光和放大尺寸 CSS调整
7B2v主题logo美化

B2 logo设置位置(v1.80):

都知道B2有两种设置:深色和浅色感觉春哥想做个黑夜白天切换,具体怎样,期待吧!

深色logo和浅色logo位置都是在主题后台-基本设置里面,很轻松就能找到

柒比贰主题B2 Logo增加炫光和放大尺寸 CSS调整

深色模式:

主要是pc端和手机端顶部的位置显示的,建议使用svg格式的,毕竟矢量图拉伸不会像素模糊,造成logo不清晰

浅色模式:

在小工具中有个关于我们,如果设置了浅色logo,那个位置就会直接出现浅色logo,因为关于我们那个小工具一般放置在底部,底部背景一般为深色,配上浅色logo更显眼

深色logo(顶部logo)大小设置:

以我的94设计为例,

.logo img{eight: 38px !important;}

把上面的代码放到子主题的style.css里面,38就是logo的显示高度,能把logo放大。

//来源https://chonzi.com
.logo:before{/*这里第一句看原理解释*/content: "";
    position: absolute;
    width: 150px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);/*角度倾斜45*/-webkit-animation: blink 1s ease-in 1s infinite;/*光扫过去的时间,自己修改,可以加快*/animation: blink 1s ease-in 1s infinite;/*光扫过去的时间,自己修改,可以加快*/
}
 
@-webkit-keyframes blink {
    from {left: 10px;top: 0;}
    to {left: 320px;top: 0;}
}
@-o-keyframes blink {
    from {left: 10px;top: 0;}
    to {left: 320px;top: 0;}
}
@-moz-keyframes blink {
    from {left: 10px;top: 0;}
    to {left: 320px;top: 0;}
}
@keyframes blink {
    from {left: -100px;top: 0;}
    to {left: 320px;top: 0;}
}

深色logo(顶部logo)闪光:

依旧把下面的代码放到子主题里面就可以了,某部分的文章类型会出问题,自己慎重今天教程就到这里结束了,欢迎关注倒数网络!

展开全文
  • 您有好资源需要让广大网友一起享用吗?可以是您的主题,也可以是插件,欢迎来投稿!
  • 这里是我的博客,亦是您分享插件或主题的地方,虫子君只专注WordPress,以及自己的工作。这里欢迎你来投稿。

您必须才能发表评论!

评论:2   其中:访客  1   博主  1
    • avatar 倒数网络 0

      站长,转载能否署名出处哟。你这样貌似有点不合常理