纯css给logo上加上扫光效果

<h1 > <a href="/">

<img src="/skin/ecms/img/logo.png" alt="帝国CMS模板" /></a>

</h1> </hgroup>

 

 

/**logo扫光效果CSS**/ .logo-site, .logo-sites {
	float: left;
	position: relative;
	margin: 10px 0 0 10px;
	transition-duration: .5s
}
.logo-site {
	width: 220px;
	overflow: hidden
}
@media screen and (max-width:480px) {
.logo-site {
	width: 140px
}
}
.logo-site:before {
	content: "";
	position: absolute;
	left: -665px;
	top: -460px;
	width: 200px;
	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
}
@-webkit-keyframes searchLights {
0% {
left:-100px;
top:0
}
to {
left:120px;
top:100px
}
}