百度SEO排名、网络危机公关、负面信息压制、舆情处理服务

利用:before选择器给你的网站Logo添加扫光特效-wordpress美化特效

在知更鸟大神的网站看到他的Begin主题Logo有扫光特效,看起来还是比较炫的。研究了一下,发现是用:before选择器实现的扫光效果,现在把代码甩出来,觉得好看的可以在自己的站点上试一试。

利用:before选择器给你的网站Logo添加扫光特效-wordpress美化特效的图片

Logo扫光方法

方法很简单,只需要添加一段css代码即可,如果你是WordPress程序,那么请在当前主题css文件最下方添加如下代码,需注意:代码中的#logo:before,根据自己的实际情况修改为当前主题的Logo元素选择器名称。

  1. /**logo扫光效果CSS**/
  2. #logo:before{
  3.     content:“”;
  4.     positionabsolute;
  5.     left: –665px;
  6.     top: –460px;
  7.     width200px;
  8.     height15px;
  9.     background-color: rgba(255,255,255,.5);
  10.     -webkit-transform: rotate(-45deg);
  11.     -moz-transform: rotate(-45deg);
  12.     -ms-transform: rotate(-45deg);
  13.     -o-transform: rotate(-45deg);
  14.     transform: rotate(-45deg);
  15.     -webkit-animation: searchLights 1s ease-in 1s infinite;
  16.     -o-animation: searchLights 1s ease-in 1s infinite;
  17.     animation: searchLights 1s ease-in 1s infinite;
  18. }
  19. @-webkit-keyframes searchLights {
  20.     0% { left: –100pxtop: 0; }
  21.     to { left120pxtop100px; }
  22. }
  23. @-o-keyframes searchLights {
  24.     0% { left: –100pxtop: 0; }
  25.     to { left120pxtop100px; }
  26. }
  27. @-moz-keyframes searchLights {
  28.     0% { left: –100pxtop: 0; }
  29.     to { left120pxtop100px; }
  30. }
  31. @keyframes searchLights {
  32.     0% { left: –100pxtop: 0; }
  33.     to { left120pxtop100px; }
  34. }

当然,此效果也适用于其他建站程序,其仅仅是一个CSS效果而已。

赞(0) 打赏
未经允许不得转载:企鹅SEO » 利用:before选择器给你的网站Logo添加扫光特效-wordpress美化特效
分享到: 更多 (0)

企鹅SEO博客,是一个关注SEO、SEM、百度下拉、网站优化教程、资源分享博客。百度优化快速接单,提升百度权重和关键字排名!

联系我们关于我们