在logo上面实现类似闪电的动画效果

css代码:
.logo.scaning:before {
    content: "";
    position: absolute;
    left: -465px;
    top: -260px;
    width: 250px;
    height: 15px;
    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;
}

 

Html代码:

 

<div class="logo scaning">
<a style="background-image:url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png)" href="https://www.baidu.com/" title="baidu">Baidu</a>
</div>

 

posted @ 2022-05-11 13:21  专注网站建设和推广  阅读(56)  评论(0编辑  收藏  举报