html - 减少边框的宽度

Question

我正在尝试仅使用 css 制作一个简单的动画。这个想法是，当我将鼠标悬停在一个社交图标上时，它看起来像是在抬起。我设法做到了，但现在我想使用“边框”来让它看起来像是图标的阴影。我减少了悬停时边框的厚度，但我想让它看起来更逼真，并以某种方式减少悬停时边框的宽度。有任何想法吗？ 这是我的 fiddle :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/