Question

我试图只使用css做一个简单的动画。我的想法是，当我悬停一个社交图标时，它似乎会被提升。我设法做到了，但现在我想使用＆＃34; border＆＃34;看起来它像是影像的影子。我在悬停时减小了边框的厚度，但我想让它看起来更逼真，并且在悬停时以某种方式减小边框的宽度。有任何想法吗？这是我的小提琴：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/

减少边框的宽度

1 个答案: