加入收藏在线咨询联系我们
位置:首页 > 精彩案例 > 帝国cms

纯css给logo上加上扫光效果

● 精彩案例 ●

 <hgroup class="logo-site">

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

 

联系人:苏经理
Q Q:1193159788
电话:0532-0806666
邮箱: www@xcyfyz.com
地址:中国 山东 济南