给网页logo添加纯代码闪光效果

文章：张荣国

首先，我们给logo图片所在的层定义一个类：

<div class="zrglogo"><img src="zrg.png"><div>

以上class=”logo”就是给div设了一个叫zrglogo的类（如果你自己logo层有定义类，改成自己的）

然后建一个css文件，比如叫zrg.css，那么在网页</head>上面加入：

<link href="zrg.css" rel="stylesheet">

然后在zrg.css添加以下代码:（如自己有css文件的，直接将这代码添加在尾部）

/**logo闪光效果CSS**/
.zrglogo{
 position: relative;
 overflow: hidden;
 float:left;
 max-height: 50px;
}
.zrglogo:before {
 content: "";
 position: absolute;
 width: 140px;
 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;}
}

使用方法说明：

至此完成，按自己的意愿设定，或用在其他地方也行，不一定用于logo图片

点击数：282