经常逛掘金的朋友都能看到左侧的图标分享链接，当我们把鼠标移上去，除了图标有了正常的颜色，就没有其他的效果了，那么，加上一点动画是不是更有趣呢?
我想设置这样一个动画效果:当鼠标移动到链接时，里面的图标向左移动后消息，过很短的时间正常颜色的图标从右边出现，回到原点。
很显然，我们可以利用@keyframes这一属性，为里面的图标（或是图片）添加一个路径动画，同时设置外层的div属性为overflow: hidden;。为了用户感知的方便，应该在外层div设置hover效果，以下为代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo1</title>
<style>
aside{
margin: 120px auto 0 auto;
width: 78px;
}
.icon-area{
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin: 15px;
width: 48px;
height: 48px;
border-radius: 50%;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5);
cursor: pointer;
}
.icon-img{
width: 30px;
height: 30px;
object-fit: cover;
filter: grayscale(100%);
}
.icon-area:hover .icon-img{
animation: change .8s forwards;
}
@keyframes change {
0%{
transform: translate(0,0);
}
40%{
transform: translate(-60px,0);
}
45%{
transform: translate(-60px,60px);
}
50%{
transform: translate(0,60px);
}
55%{
transform: translate(60px,60px);
}
60%{
filter: none;
transform: translate(60px,0);
}
100%{
filter: none;
transform: translate(0,0);
}
}
</style>
</head>
<body>
<aside>
<div class="icon-area">
<img src="img/weibo.png" alt="weibo" class="icon-img">
</div>
<div class="icon-area">
<img src="img/qq.png" alt="qq" class="icon-img">
</div>
<div class="icon-area">
<img src="img/wechat.png" alt="wechat" class="icon-img">
</div>
</aside>
</body>
</html>
这里使用translate,而不是传统的position,是为了使得浏览器能开启GPU加速，同时能够避免页面的重绘,能够有效提高性能，以下为具体效果
现在，让我们来实现另外一个效果，当我们把鼠标移到分享链接时，灰色的图标往左移动并消失，同时右侧进来一个正常的图标，当我们移开鼠标时，以下动画反向。我们可以用两张图片来实现，第一张居中，第二张隐藏，鼠标移上去均左移，离开均归位。以下为代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo2</title>
<style>
aside{
margin: 120px auto 0 auto;
width: 78px;
}
.icon-area{
overflow: hidden;
display: flex;
align-items: center;
margin: 15px;
width: 48px;
height: 48px;
border-radius: 50%;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5);
cursor: pointer;
}
.common-icon{
width: 30px;
height: 30px;
object-fit: cover;
}
.first-icon{
filter: grayscale(100%);
transform: translate(9px,0);
transition: all .4s;
}
.second-icon{
transform: translate(28px,0);
transition: all .4s;
}
.icon-area:hover .first-icon{
transform: translate(-40px,0);
}
.icon-area:hover .second-icon{
transform: translate(-21px,0);
}
</style>
</head>
<body>
<aside>
<div class="icon-area">
<img src="img/weibo.png" alt="weibo" class="common-icon first-icon">
<img src="img/weibo.png" alt="weibo" class="common-icon second-icon">
</div>
<div class="icon-area">
<img src="img/qq.png" alt="qq" class="common-icon first-icon">
<img src="img/qq.png" alt="qq" class="common-icon second-icon">
</div>
<div class="icon-area">
<img src="img/wechat.png" alt="wechat" class="common-icon first-icon">
<img src="img/wechat.png" alt="wechat" class="common-icon second-icon">
</div>
</aside>
</body>
</html>
在上面的代码中，我设置了图标区域为flex布局，但仅设置了上下居中，两张图片的定位和移动距离需要自己计算。如第一张图片距离左边9px,就是图标区域的宽度减去图片的宽度再除以2，即(48px-30px)/2，而且你应该发现，两种图片移动的距离是一样的，即40+9=21+28，以下为效果
事实上，现在的实际软件开发中，为了减少网络请求，优化性能等因素，都是直接使用图标CSS文件，我们可以在其外部使用一个div同样可达到上面的效果。如果这篇文章对你有帮助，请给我点个赞吧！！！
