Loading
0

利用:before选择器给你的网站Logo添加扫光特效-wordpress美化特效
被墙跳转TG:@qianhenetwork QQ 851617266

301免备案跳转微信公众号
腾讯云服务器大促销。
华为服务器

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

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效果而已。

301免备案跳转微信公众号
华为服务器
腾讯云服务器大促销。

声明:站长码字很辛苦啊,转载时请保留本声明及附带文章链接:https://www.zfcdn.xyz/showinfo-19-18738-0.html
亲爱的:被墙域名跳转TG:@qianhenetwork QQ:851617266,可否收藏+评论+分享呢?
上一篇:wordpress美化-本站底部添加蒲公英飘动特效
下一篇:【分享】2018附带正版秘钥The7 V6.7.1最新版汉化版,支持在线更新响应式多用途的WordPress企业主题