基本上每一个网站都有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 月 11 日
如果觉得我的文章不错,请随手点赞~