鼠标经过滚动切换的背景的css

215月

鼠标经过滚动切换的背景的css

鼠标经过每个标志，背景是滚动出现的，主要是应用transition的属性

css代码

/*social*/
.socialbar { width:auto; height:auto; overflow:hidden;}
.socialbar ul {
list-style: none;
margin: 0 0 -1px 0;
float: right;
}
.socialbar ul li {
display:block;
float: left;
margin:0;
padding:0;
}
.socialbar ul li a {
-webkit-transition:all 0.2s ease 0s;
-moz-transition:all 0.2s ease 0s;
-o-transition:all 0.2s ease 0s;
transition:all 0.2s ease 0s;
display:block;
width:40px;
height:40px;
text-indent:-9999px;
background-position: 0px 0px;
background-repeat: no-repeat;
opacity: 0.6;
}

.socialbar a:hover {
background-color: #cccccc;
background-position: 0px -40px !important;
opacity: 1;
}
.social-rss a {
background: url("images/social/rss.png") no-repeat scroll 0 0 transparent;
}
.social-rss a {
background: url("images/social/rss.png") no-repeat scroll 0 0 transparent;
}
.social-rss a:hover {
background-color: #FE9900;
}
.social-youtube a {
background: url("images/social/youtube.png") no-repeat scroll 0 0 transparent;
}
.social-youtube a:hover {
background-color: #F45750;
}
.social-linkedin a {
background: url("images/social/linkedin.png") no-repeat scroll 0 0 transparent;
}
.social-linkedin a:hover {
background-color: #71B2D0;
}
.social-google a {
background: url("images/social/google.png") no-repeat scroll 0 0 transparent;
}
.social-google a:hover {
background-color: #DD4B39;
}
.social-facebook a {
background: url("images/social/facebook.png") no-repeat scroll 0 0 transparent;
}
.social-facebook a:hover {
background-color: #3B5998;
}
.social-twitter a {
background: url("images/social/twitter.png") no-repeat scroll 0 0 transparent;
}
.social-twitter a:hover {
background-color: #48C4D2;
}

html代码

<div>
<ul>
<li><a target="_blank" href="http://www.twitter.com/" data-original-title="Twitter">Twitter</a></li>
<li><a target="_blank" href="http://facebook.com/" data-original-title="Facebook">Facebook</a></li>
<li><a target="_blank" href="http://google.com/" data-original-title="Google">Google+</a></li>
<li><a target="_blank" href="http://linkedin.com/" data-original-title="LinkedIn">LinkedIn</a></li>
<li><a target="_blank" href="http://youtube.com/" data-original-title="YouTube">YouTube</a></li>
<li><a target="_blank" href="http://camp.myechinese.com/feed/" data-original-title="RSS">RSS</a></li>
</ul>
</div>

分享到：