在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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章