1

我有一个用 css 制作的动画 twitter 按钮。但我希望这种效果水平翻转；左边的文本和右边的图标。并且扩大的悬停效果从右到左。我尝试了很多事情，但似乎找不到解决方案。有没有人可以在这里帮助我？

http://jsfiddle.net/3rv94/

HTML：

<ul id="tbisose">
<li data-alt="Twitter">
<a class="icon twitter" 
   class="twitter-follow-button" 
   data-show-count="false" 
   href="https://twitter.com/musicradiate">Twitter
</a></li>
</ul>

CSS：

#tbisose {
list-style:none; 
text-decoration:none; 
font-size:0.9em; 
font-family:trebuchet ms,sans-serif;
}

#tbisose a {
text-decoration:none; 
font-family:trebuchet ms,sans-serif;
}

#tbisose li {
position:relative; 
height:38px; 
cursor:pointer; 
padding: 0 !important;
}

#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter {
position:relative; 
z-index:5; 
display:block; 
float:none; 
margin:10px 0 0; 
width:120px; height:38px; border-radius:5px; 
background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png) no-repeat;  
background-color:rgba(217,30,118,.42); 
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; 
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  
box-shadow:rgba(0,0,0,.28) 0 2px 3px; 
color:#141414; 
text-align:left; 
text-indent:40px; 
text-shadow:#333 0 1px 0; 
white-space:nowrap;  
line-height:32px; 
-webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; 
-moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; 
-ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; 
-o-transition:width .25s ease-in-out,background-color .25s ease-in-out; 
transition:width .25s ease-in-out,background-color .25s ease-in-out; 
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:40px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:110px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
4

0 回答 0