HTML图片扫光效果 CSS 样式代码分享

学习笔记 5个月前 飞鱼
158 0

今天给大家分享的是段 CSS 效果,主要就是对博客 LOGO 进行了一个修饰,具体效果可以看博主网站顶部的 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; 里面的数值,其余也没啥好解释的额。

HTML图片扫光效果 CSS 样式代码分享
版权声明:飞鱼 发表于 2020-05-29 0:18:51。
转载请注明:HTML图片扫光效果 CSS 样式代码分享 | HelloWorld.La

暂无评论

暂无评论...