css 动画效果 -- transition

最新推荐文章于 2026-05-04 11:01:07 发布

原创最新推荐文章于 2026-05-04 11:01:07 发布 · 694 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

div + css

本文介绍了一种用于网站的社交图标样式CSS代码及对应的HTML结构。通过使用不同的类名，可以为Facebook、Twitter等社交平台创建独特的悬停效果，并调整背景颜色。

/*nsn */
.social li a{ -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
/* social links */
.social { clear:right; float:right; list-style:none; margin:34px 0 10px 0; }
.social li { display:inline-block; text-indent:-999em; }
.social li a { display:block; width:50px; height:50px; margin-left:5px; background-image:url(../img/background/social.png); background-repeat:no-repeat; 
  -webkit-border-radius: 25px;
     -moz-border-radius: 25px;
          border-radius: 25px;
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

.social li:first-child a { margin-left:0; } 
.social li a:hover { border-top-left-radius:0px;  border-bottom-right-radius:0px;}
.social li a.facebook:hover { background-color:#3c5fac; }
.social li a.twitter { background-position:-32px 0; }
.social li a.twitter:hover { background-color:#5ec3df; }
.social li a.flickr { background-position:-64px 0; }
.social li a.flickr:hover { background-color:#FF0084; }
.social li a.rss { background-position:-96px 0; }
.social li a.rss:hover { background-color:#ff9900; }
.social li a.dribble { background-position:-128px 0; }
.social li a.dribble:hover { background-color:#EA4C89; }
.social li a.lastfm { background-position:-160px 0; }
.social li a.lastfm:hover { background-color:#D51007; }
.social li a.linkedin { background-position:-192px 0; }
.social li a.linkedin:hover { background-color:#2089b5; }
.social li a.vimeo { background-position:-224px 0; }
.social li a.vimeo:hover { background-color:#0dadd6; }
.social li a.google { background-position:-256px 0; }
.social li a.google:hover { background-color:#c63d2d; }
.social li a.forrst { background-position:-288px 0; }
.social li a.forrst:hover { background-color:#5b9a68; }
.social li a.skype { background-position:-320px 0; }
.social li a.skype:hover { background-color:#00aff0; }
.social li a.picassa { background-position:-352px 0; }
.social li a.picassa:hover { background-color:#ffd34e; }
.social li a.youtube { background-position:-384px 0; }
.social li a.youtube:hover { background-color:#c8312b; }
.social li a.pinterest { background-position:-416px 0; }
.social li a.pinterest:hover { background-color:#cb2027; }
.social li a.tumblr { background-image: url(../img/background/tumblr.png); }
.social li a.tumblr:hover { background-color: #2C4762; }

.social li a { background-color:#bbb; }

html:

<ul class="social">
    <li><a target="_blank" class="facebook" href="http://www.facebook.com">Facebook</a></li>
    <li><a target="_blank" class="twitter" href="http://www.twitter.com">Twitter</a></li>
    <li><a target="_blank" class="linkedin" href="http://www.linkedin.com">LinkedIn</a></li>
    <li><a target="_blank" class="flickr" href="http://www.flickr.com">Flickr</a></li>
    <li><a target="_blank" class="lastfm" href="http://www.last.fm">Last.fm</a></li>
    <li><a target="_blank" class="vimeo" href="http://www.vimeo.com">Vimeo</a></li>
</ul>