减少边框的宽度

Question

我正在尝试使用只有CSS的简单动画。这个想法是，当我徘徊一个社交图标时，它看起来像是在抬起。我设法做到了这一点，但现在我想用“边框”看起来像是图标的阴影。我减小了悬停边框的厚度，但我想让它看起来更加逼真，并且在悬停时以某种方式减少了边框的宽度。有任何想法吗？ 这里是我的小提琴：http://jsfiddle.net/Iulius90/sck4Lzz9/

HTML

<div> 
    <img src="http://fc05.deviantart.net/fs70/f/2012/204/7/b/logo_skype_by_jackal807-d58ctxc.png"> 
</div> 

CSS

div { 
    width:200px; 
    height:200px; 
    background-color:tomato; 
} 
img { 
    width: 100px; 
    height:100px; 
    margin: 50px; 
    border-bottom: 3px solid #222; 
    transition: all 0.35s ease; 
} 
div img:hover { 
    margin-top: 22px; 
    padding-bottom:28px; 
    border-bottom: 1px solid #222; 
    transition: all 0.35s ease; 
    cursor: pointer; 
} 

Answer 1

你可以简单地悬停时使用固体线性渐变作为背景图像，并操纵其尺寸。注意：您可能希望使用供应商前缀来生成跨浏览器兼容的CSS渐变。

img { 
    background-image: linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 100%); 
    background-position: center bottom; 
    background-repeat: no-repeat; 
    background-size: 100% 3px; 
    width: 100px; 
    height:100px; 
    margin: 50px; 
    transition: all 0.35s ease; 
} 
div img:hover { 
    background-size: 50% 1px; 
    margin-top: 22px; 
    padding-bottom:28px; 
    transition: all 0.35s ease; 
    cursor: pointer; 
} 

http://jsfiddle.net/teddyrised/sck4Lzz9/26/