写出具备动效的图标分享连接

时间 2020-06-22

标签写出具备图标分享连接繁體版

原文原文链接

常常逛掘金的朋友都能看到左侧的图标分享连接，当咱们把鼠标移上去，除了图标有了正常的颜色，就没有其余的效果了，那么，加上一点动画是否是更有趣呢?html

我想设置这样一个动画效果:当鼠标移动到连接时，里面的图标向左移动后消息，过很短的时间正常颜色的图标从右边出现，回到原点。

很显然，咱们能够利用@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加速，同时可以避免页面的重绘,可以有效提升性能，如下为具体效果bash

如今，让咱们来实现另一个效果，当咱们把鼠标移到分享连接时，灰色的图标往左移动并消失，同时右侧进来一个正常的图标，当咱们移开鼠标时，如下动画反向。咱们能够用两张图片来实现，第一张居中，第二张隐藏，鼠标移上去均左移，离开均归位。如下为代码网络

<!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，如下为效果ide

事实上，如今的实际软件开发中，为了减小网络请求，优化性能等因素，都是直接使用图标CSS文件，咱们能够在其外部使用一个div一样可达到上面的效果。若是这篇文章对你有帮助，请给我点个赞吧！！！布局