WordPress站点Logo添加扫光效果

浏览网页的时候常常看到许多网站上的Logo标志都带有扫光效果,非常漂亮。一直不知道这个效果是如何实现的,今天在翻看网页的时候碰巧在乐朦的网站上看到了这个效果的实现方法,果断将这个效果加在了自己的网站上,添加完成后的效果如下:

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添加扫光效果

原文链接:https://blog.quietguoguo.com/952.html

发布信息:文章由【蝈蝈要安静】于<2017-08-14>发布于【网站建设】分类下

相关标签:||

相关推荐

评论 ( 8 )

  • 昵称 (必填)
  • 邮箱 (必填)
  • QQ (选填)
  • 网址(选填)
  1. #4

    你好站长,按照上面方法还是没有扫光,不知道怎么回事,可以加个微信咨询下吗

    二少2个月前 (09-30)回复
    • Q 2220379479

      蝈蝈要安静2个月前 (09-30)回复
    • DUX主题 去掉第四行 float:left; 手机和电脑端均显示正常,全部去掉扫光会溢出来

      太阳4周前 (10-24)回复
  2. #3

    /**logo扫光效果CSS**/
    .site-logo{
    position: relative;
    overflow: hidden;
    //float:left;如果不去掉这个,手机端的logo将靠左,去掉一切正常
    max-height: 50px;
    }

    wonder2年前 (2018-03-05)回复
  3. #2

    博主大神,发现一个问题

    wonder2年前 (2018-03-05)回复
    • CSS样式的话可能需要根据自己网站特殊情况进行调整。

      蝈蝈要安静2年前 (2018-03-07)回复
  4. #1

    博主你好,我用的是大前端主题,新手站长不太懂这个问题,我把你给的代码放进主题的style.css里面了,但是效果不出现,请博主有空时候帮小弟解答一下好吗?谢谢

    琳琅2年前 (2017-10-12)回复
    • 大前端的主题好像都不调用style.css文件,将代码放进主题目录css文件夹中的main.css文件中或者主题后台设置中的自定义代码中应该就可以。

      蝈蝈要安静2年前 (2017-10-14)回复