无崖子资源网
做有态度的分享学习平台!

WordPress站点Logo添加扫光效果

淘宝天猫优惠劵领取网站:tao.fbisb.com

Logo扫光效果思路非常简单,具体如下:

用CSS3伪元素:bfore或:after添加一扫光层;

现用transform:rotate(-45deg)旋转45度;

CSS控制位置和动画时间等。

HTML结构

下面这段代码无需添加到主题文件中,主要是前端HTML调用的一段结构代码,大家稍作了解即可。

<div class="site-logo">  <a  href="http://localhost/wordpress/" rel="home" itemprop="url">   <img src="http://logo.png" alt="logo" itemprop="logo" width="150" height="50">  </a></div>

CSS代码

下面这段代码是我们修改主题文件的主要代码,我们需要将其添加到主题的样式表中,一般情况下是添加到主题的主样式表中,对于大多数主题来说为style.css文件,但是部分主题可能不调用这个文件,比如我所使用的DUX主题其主样式文件为main.css,所以我是将代码放在了该文件里。同时我们需要根据自己的主题将代码中的 .site-logo 修改为当前主题的Logo元素选择器名称,比如对于DUX主题修改为 .logo 即可。

/**logo扫光效果CSS**/.site-logo{  position: relative;  overflow: hidden;  float:left;  max-height: 50px;}.site-logo:before {    content: "";    position: absolute;    width: 150px;    height: 10px;    background-color: rgba(255, 255, 255, 0.5);    -webkit-transform: rotate(-45deg);    transform: rotate(-45deg);    -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;}}

@keyframes 规则可以控制扫光动画的起始位置和终止位置,以上的参数根据自己的logo的大小和布局进行调整即可。大家可以根据自己需要调整上面代码中的参数以适应自己的站点logo。

注意:对于部分自适应的主题需要把下面这段代码去掉:

.site-logo{     position: relative;    overflow: hidden;     float:left;     max-height: 50px; }

修改完成后大家就可以通过刷新网站首页查看效果了,有些时候可能无法立即查看到修改后的效果,不必担心,这多半是由于网页缓存或使用CDN服务等的关系,你可以通过清楚浏览器缓存、刷新CDN或者暂时停用下CDN来快速查看到效果。

未经允许不得转载:无崖子资源网 » WordPress站点Logo添加扫光效果

评论 1

签到
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-9

    还是不行呀,哥们。扫光会员加验证都不行,有时间可以加个WX指导下吗?

    二少Windows 7 | Chrome 57.0.2987.98 3周前 (09-30)回复
切换注册

登录

忘记密码 ?

切换登录

注册