为网站log增加闪光动画效果已经不算是新鲜东西了。不过现在还是有很多网站使用此效果，让logo显得比较有美观。今天分享一篇如何用纯代码的方式为网站logo添加闪光动画效果，适用于所有网站。我们浏览网站时经常会看到一些网站的LOGO带有扫光效果，像光线扫过一样，看上去比较美观。有的站长可能用软件做一个GIF格式的logo，可以达到类似的效果，但是今天发现可以用纯代码实现网站logo扫光的效果，还是很不错的。
- /**logo闪光效果CSS**/
- .logo{
- position: relative;
- overflow: hidden;
- float:left;
- max-height: 50px;
- }
- .logo:before {
- content: "";
- position: absolute;
- width: 150px;
- height: 10px;
- background-color: rgba(255, 255, 255, 0.5);
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- -webkit-animation: blink 1s ease-in 1s infinite;
- animation: blink 1s ease-in 1s infinite;
- }
- @-webkit-keyframes blink {
- from {left: 10px;top: 0;}
- to {left: 320px;top: 0;}
- }
- @-o-keyframes blink {
- from {left: 10px;top: 0;}
- to {left: 320px;top: 0;}
- }
- @-moz-keyframes blink {
- from {left: 10px;top: 0;}
- to {left: 320px;top: 0;}
- }
- @keyframes blink {
- from {left: -100px;top: 0;}
- to {left: 320px;top: 0;}
- }
@keyframes 规则控制扫光的起始位置和终止位置,以上的参数根据自己的logo的大小和布局进行调整即可。大家可以根据自己需要调整上面代码中的参数以适应自己的站点logo。
PS：部分自适应的主题需要把下面这段代码去掉：
- .logo{
- position: relative;
- overflow: hidden;
- float:left;
- max-height: 50px;
- }
使用wordpress的站长可以把代码中的.logo修改成自己主题使用的logo元素选择器名称，比如有的是.site-logo。原则上说这个代码应该可以适用于所有网站，并不仅限于wordpress程序。
