寫出具備動效的圖標分享連接

時間 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>

複製代碼