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

2018年7月5日11:54:04 发表评论 490 views

在知更鸟大神的网站看到他的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效果而已。

weinxin
欢迎加入中国SEO站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。中国企鹅SEO站长博客群
企鹅博客

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: