LOGO 扫光效果 CSS 样式分享
  Skill  1610℃  8条  204字数  预计阅读时间1分钟

LOGO 扫光效果 CSS 样式分享

  Skill  1610℃  8条  204字数  预计阅读时间1分钟

很久没有看自己的博客了,年前肺炎开始其实一直在忙,公司所有对外宣传都在网络端了。当然博主已经复工上班了,希望大家注意保护自己,少外出、戴口罩,武汉加油,中国加油!

话不多说,今天给大家分享的是段 CSS 效果,主要就是对博客 LOGO 进行了一个修饰,具体效果可以看博主网站顶部的 LOGO 图标,可以看到会有一道光掠过(其实并没有什么卵用,哈哈)。

下面是代码分享:

.navbar-logo:before {
    content: "";
    position: absolute;
    width: 28px;
    height: 6px;
    background-color: rgba(255,255,255,.5);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 1s ease-in 1s infinite;
    -o-animation: searchLights 1s ease-in 1s infinite;
    animation: searchLights 1s ease-in 1s infinite
}
@-webkit-keyframes searchLights {
    0% {left: -30px;top: 8px}
    to {left: 75px;top: 8px}
}
@-o-keyframes searchLights {
    0% {left: -30px;top: 8px}
    to {left: 75px;top: 8px}
}
@-moz-keyframes searchLights {
    0% {left: -30px;top: 8px}
    to {left: 75px;top: 8px}
}
@keyframes searchLights {
    0% {left: -30px;top: 8px}
    to {left: 75px;top: 8px}
}

主要注意可能需要修改的地方就是 0% {left:-30px;top:8px} to {left:75px;top:8px} 以及 width:28px; height:6px; 里面的数值,其余也没啥好解释的额。

很匆忙的写了篇水文哈,最后祝大家都身体健康,早日开工哈!

LOGO 扫光效果 CSS 样式分享

whjy.jpg

很久没有看自己的博客了,年前肺炎开始其实一直在忙,公司所有对外宣传都在网络端了。当然博主已经复工上班了,希望大家注意保护自己,少外出、戴口罩,武汉加油,中国加油!

话不多说,今天给大家分享的是段 CSS 效果,主要就是对博客 LOGO 进行了一个修饰,具体效果可以看博主网站顶部的 LOGO 图标,可以看到会有一道光掠过(其实并没有什么卵用,哈哈)。

logosg.jpg

下面是代码分享:

.navbar-logo:before {
    content: "";
    position: absolute;
    width: 28px;
    height: 6px;
    background-color: rgba(255,255,255,.5);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 1s ease-in 1s infinite;
    -o-animation: searchLights 1s ease-in 1s infinite;
    animation: searchLights 1s ease-in 1s infinite
}
@-webkit-keyframes searchLights {
    0% {left: -30px;top: 8px}
    to {left: 75px;top: 8px}
}
@-o-keyframes searchLights {
    0% {left: -30px;top: 8px}
    to {left: 75px;top: 8px}
}
@-moz-keyframes searchLights {
    0% {left: -30px;top: 8px}
    to {left: 75px;top: 8px}
}
@keyframes searchLights {
    0% {left: -30px;top: 8px}
    to {left: 75px;top: 8px}
}

主要注意可能需要修改的地方就是 0% {left:-30px;top:8px} to {left:75px;top:8px} 以及 width:28px; height:6px; 里面的数值,其余也没啥好解释的额。

很匆忙的写了篇水文哈,最后祝大家都身体健康,早日开工哈!

发表你的评论
* 私密评论
选择表情
  1. 无主无名
    B罩

    要是没这文章,我可能还没发现.

    搜狗浏览器 广西桂林市
  2. tnjc
    B罩

    好好上班!哈哈哈

    Chrome 江西省赣州市
  3. 哭啼鬼
    B罩

    这个可以,很强势

    Safari 福建省厦门市
    1. Jdeal
      主人
      @哭啼鬼

      没有没有,哈哈,一点小效果。

      Safari 江苏省无锡市
  4. zmmio
    C罩

    羡慕上班的人,快在家里宅废了,上班了还是需要自己注意保护自己

    Chrome 四川省泸州市
    1. Jdeal
      主人
      @zmmio

      是的,一直戴口罩开窗通风消毒什么的😄

      Safari 江苏省无锡市
  5. 山卜方
    B罩

    现在就缺一个logo了 aru_60.png

    Chrome 黑龙江省哈尔滨市
    1. Jdeal
      主人
      @山卜方

      哈哈,出门左转,免费领。 aru_16.png

      Safari 江苏省无锡市