为WordPress站点Logo添加扫光

常常看到许多网站上的Logo标志都带有扫光效果,非常漂亮。今天将这个效果加在了自己的网站上,添加完成后的效果请看本站logo.

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

1.用CSS3伪元素:bfore或:after添加一扫光层;
2.现用transform:rotate(-45deg)旋转45度;
3.CSS控制位置和动画时间等。

那么,如何修改css属性,为自己网站的logo添加扫光特效呢?

第一步,在自己的网站logo上,鼠标右键-检查,打开代码查看面板,找到自己网站logo图片的Logo元素选择器名称(即:logo)。

第二步,把以下代码加入主题CSS中

/**logo扫光效果CSS**/
.logo{
  position: relative;
  overflow: hidden;
  float:left;
  max-height: 50px;
}
.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。

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

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

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

© 版权声明
THE END
喜欢就支持以下吧
点赞0
分享
评论 抢沙发