一个常见的社交链接icon效果带二维码

首先引用了ICONFONT里面几个常见图标

<link rel="stylesheet" href="http://at.alicdn.com/t/font_3343514_uzeq7hf9dn.css">

包含：微博(icon-weibo)，抖音(icon-douyin)，微信(icon-weixin)，知乎(icon-zhihu)，头条(icon-jinritoutiao)

HTML代码如下，用了uikit框架flex

<ul class="uk-flex social_link">
    <li>
        <a href="<cms:get_field 'url_weibo' masterpage='social.php' />"><i class="iconfont icon-weibo"></i></a>
    </li>
    <li>
        <div class="uk-position-relative">
            <a href="javascript:;"><i class="iconfont icon-weixin"></i></a>
            <div uk-dropdown="pos:top-center"><img src="<cms:get_field 'social_wechat' masterpage='social.php' />" alt=""></div>
        </div>
    </li>
    <li>
        <div class="uk-position-relative">
            <a href="javascript:;"><i class="iconfont icon-douyin"></i></a>
            <div uk-dropdown="pos:top-center"><img src="<cms:get_field 'social_tiktok' masterpage='social.php' />" alt=""></div>
        </div>
    </li>
</ul>

CSS代码如下，用了SASS嵌套写法

.social_link{
    margin-top: 30px;
    padding: 0;
    li{
        list-style:none;
        display: inline-block;
        margin-right: 10px;
        a{
            display: block;
            width: 30px;
            height: 30px;
            background-color: #6d6d6d;
            border-radius: 50%;
            text-align: center;
            line-height: 29px;
            color: #b9b9b9;
            transition: all 0.4s;
            &:hover{
                text-decoration: none;
                color: #fff;
            }
        }
        .uk-dropdown{
            max-width: 110px;
            min-width: 110px;
            padding: 5px;
            box-shadow: 0 0 4px rgba(0,0,0,.1);
            &::after {
                content: '';
                display: block;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: -10px;
                width: 0;
                height: 0;
                border-left: 7px solid transparent;
                border-right: 7px solid transparent;
                border-top: 10px solid rgb(255, 255, 255);
            }
        }
    }
}