• 首页
  • 博客
  • 网站
  • 分享
  • 数码

当前位置:首页 » 个人博客 » 正文

网站顶部LOGO添加扫光特效修改教程

 人参与  2022年10月17日 07:52  分类 : 个人博客  点这评论

为什么有些网站logo会有一道会动的光效?你们之前还以为是GIF图吧,其实这是个扫光特效,下面给大家分享网站LOGO扫光特效的CSS代码:

 float:left; max-height: 50px; } .site-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;}
}

将上面的代码复制 进主题的主要样式表当中并上传,大多数主题的主要样式表命名为style.css,但是有一部分主题的不一样,这个需要自己去寻找。

当然也可以修改部分参数,达到完美匹配的效果。

另外,在某些自适应站点当中可能会出错 ,可以试着将以下代码删除(也就是第一段):

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


投稿内容不要求原创性,所指观点属原作者所有!

本文链接:http://www.ziti66.com/net/html/51.html

本文标签:LOGO扫光    

微信公众号:升级中

<< 上一篇下一篇 >>
为祖国加油
疫情防护,人人有责。祖国加油...
为祖国加油
疫情防护,人人有责。祖国加油...

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

相关文章

    搜索

    网站分类

    Tags列表

    最新留言

    ++发现更多精彩++

      祖国加油!!!

    Copyright ziti66.com on 2022. Some Rights Reserved.