网站LOGO添加扫光特效

岳泽以

发布于 2022-10-26 16:29:26

8900

发布于 2022-10-26 16:29:26

文章被收录于专栏：岳泽以博客岳泽以博客

基本上每一个网站都有logo，可能是文字形式的也可能是图片形式，而一个logo是企业形象或者产品形象的符号化体现，一个好看的有特色的logo更是能大大提高网站的吸引力。

今天说的就是针对网站logo通过css制作一个扫光特效美化。

这个方法主要针对博客类网站或者直接后台可以添加自定义css特效的网站，当然如果你稍懂一点前端技术的话也可以添加到自己的任意网站上。

在handsome主题的后台自定义css内直接添加以下代码：

/*
 * LOGO扫光
*/
.navbar-brand {
    position: relative;
    font-size:2em;
    font-weight:700;
    line-height:39px;
    overflow:hidden;
    margin:0;
}
 
.navbar-brand::before{
    content:"";
    position: absolute;
    width: 150px;
    height: 10px;
    background-color: rgba(255,255,255,.5);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 1s ease-in 1s infinite;
    animation: searchLights 1s ease-in 1s infinite;
}
 
@-webkit-keyframes searchLights {
    0% { left: -90px; top: 0; }
    to { left: 90px; top: 0; }
}

如果你想将其用于其他类型站点的话，可以通过F12查看一下logo的类选择器是什么，然后替换掉代码中的 navbar-brand，再把全部代码放到网站的自定义css内，如果你的网站后台无法设置，可以直接在源CSS文件中找到logo的CSS选择器然后添加以上属性。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022 年 01 月，如有侵权请联系 cloudcommunity@tencent.com 删除

css