在羅賓斯大神的網(wǎng)站上看到他的Begin主題Logo有掃光特效，看起來還是挺炫的。研究了一下，發(fā)現(xiàn)是通過:before selector實(shí)現(xiàn)的掃頻效果?，F(xiàn)在，扔掉代碼。如果你覺得好看，可以在自己的網(wǎng)站上試試。
Logo掃法 方法很簡單，你只需要添加一段css代碼。如果你是WordPress程序，請(qǐng)?jiān)诋?dāng)前主題的css文件底部添加以下代碼。注意:代碼中的#Logo:before根據(jù)你的實(shí)際情況改為當(dāng)前主題的Logo元素選擇器的名稱。
/**logo掃光效果CSS**/ #logo:before{ ????content:&#;&#;; ????position:?absolute; ????left:?&#;px; ????top:?&#;px; ????width:?px; ????height:?px; ????background-color:?rgba(,,,.); ????-webkit-transform:?rotate(-deg); ????-moz-transform:?rotate(-deg); ????-ms-transform:?rotate(-deg); ????-o-transform:?rotate(-deg); ????transform:?rotate(-deg); ????-webkit-animation:?searchLights?s?ease-in?s?infinite; ????-o-animation:?searchLights?s?ease-in?s?infinite; ????animation:?searchLights?s?ease-in?s?infinite; } @-webkit-keyframes?searchLights?{ ????%?{?left:?&#;px;?top:?;?} ????to?{?left:?px;?top:?px;?} } @-o-keyframes?searchLights?{ ????%?{?left:?&#;px;?top:?;?} ????to?{?left:?px;?top:?px;?} } @-moz-keyframes?searchLights?{ ????%?{?left:?&#;px;?top:?;?} ????to?{?left:?px;?top:?px;?} } @keyframes?searchLights?{ ????%?{?left:?&#;px;?top:?;?} ????to?{?left:?px;?top:?px;?} }當(dāng)然這個(gè)效果也適用于其他建站程序，只是一個(gè)CSS效果。
作者：徐州百都網(wǎng)絡(luò) | 來源： | 發(fā)布于：2022-04-12 00:18:12