WordPress

为WordPress站点添加Logo扫光效果

阅读网页的时分常常看到许多网站上的Logo标志都带有扫光作用,十分美丽。一直不知道这个作用是怎么完成的,今天在翻看网页的时分碰巧看到了这个作用的完成办法,决断将这个作用加在了自己的网站上,增加完成后的作用如下:


Logo扫光作用思路十分简略,具体如下:
用CSS3伪元素:bfore或:after增加一扫光层;

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

CSS操控方位和动画时刻等。

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

  1. <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>

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

  1. /**logo扫光效果CSS**/ .site-logo{
  2.   positionrelative;
  3.   overflowhidden;
  4.   float:left;
  5.   max-height50px;
  6. } .site-logo:before {
  7.     content"";
  8.     positionabsolute;
  9.     width150px;
  10.     height10px;
  11.     background-color: rgba(255, 255, 255, 0.5);
  12.     -webkit-transform: rotate(-45deg);
  13.     transform: rotate(-45deg);
  14.     -webkit-animation: blink 1s ease-in 1s infinite;
  15.     animation: blink 1s ease-in 1s infinite;
  16. } @-webkit-keyframes blink { from {left10px;top: 0;} to {left320px;top: 0;} } @-o-keyframes blink { from {left10px;top: 0;} to {left320px;top: 0;} } @-moz-keyframes blink { from {left10px;top: 0;} to {left320px;top: 0;} } @keyframes blink { from {left: -100px;top: 0;} to {left320px;top: 0;} }

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

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

修正完成后我们就可以经过改写网站主页检查作用了,有些时候可能无法当即检查到修正后的作用,不用忧虑,这多半是因为网页缓存或使用CDN服务等的联系,你可以经过清楚浏览器缓存、改写CDN或许暂时停用下CDN来快速检查到作用。

  1. .site-logo{  
  2.   positionrelative;  
  3.   overflowhidden;  
  4.   float:left;  
  5.   max-height50px;  
  6. }  
(1)

本文由 优次元 作者:MiChen 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注


*