幽灵风格的社交链接菜单 - 踏得网

Social menu 悬停时，圆弧形菜单变形为方形。

svg, menu, widget

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2298
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    padding: 0;
    margin: 0;
}
*,
*:before,
*:after {
    box-sizing: border-box;
}
body {
    background: url(/uploads/161001/city--1-min-min.jpg) center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.outer {
    position: relative;
    height: 350px;
    width: 350px;
    display: flex;
    flex-flow: row wrap;
    transform: rotate(45deg);
}
.inner {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    content: '';
    width: 50%;
    height: 50%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.7);
    -webkit-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.inner svg {
    transform: rotate(-45deg);
    width: 3em;
    fill: white;
}
.inner:nth-child(1) {
    border-top-left-radius: 100%;
}
.inner:nth-child(2) {
    border-top-right-radius: 100%;
}
.inner:nth-child(3) {
    border-bottom-left-radius: 100%;
}
.inner:nth-child(4) {
    border-bottom-right-radius: 100%;
}
.inner:hover {
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    border-radius: initial;
}
.inner:hover svg {
    fill: rgba(0, 0, 0, 0.7);
}

HTML

<div class="outer">
    <a class="inner" href="#">
        <svg viewBox="0 0 20 20">
            <path d="M17.316,6.246c0.008,0.162,0.011,0.326,0.011,0.488c0,4.99-3.797,10.742-10.74,10.742c-2.133,0-4.116-0.625-5.787-1.697
				c0.296,0.035,0.596,0.053,0.9,0.053c1.77,0,3.397-0.604,4.688-1.615c-1.651-0.031-3.046-1.121-3.526-2.621
				c0.23,0.043,0.467,0.066,0.71,0.066c0.345,0,0.679-0.045,0.995-0.131c-1.727-0.348-3.028-1.873-3.028-3.703c0-0.016,0-0.031,0-0.047
				c0.509,0.283,1.092,0.453,1.71,0.473c-1.013-0.678-1.68-1.832-1.68-3.143c0-0.691,0.186-1.34,0.512-1.898
				C3.942,5.498,6.725,7,9.862,7.158C9.798,6.881,9.765,6.594,9.765,6.297c0-2.084,1.689-3.773,3.774-3.773
				c1.086,0,2.067,0.457,2.756,1.191c0.859-0.17,1.667-0.484,2.397-0.916c-0.282,0.881-0.881,1.621-1.66,2.088
				c0.764-0.092,1.49-0.293,2.168-0.594C18.694,5.051,18.054,5.715,17.316,6.246z" />
        </svg>
    </a>
    <a class="inner" href="#">
        <svg viewBox="0 0 20 20">
            <path d="M17,1H3C1.9,1,1,1.9,1,3v14c0,1.101,0.9,2,2,2h7v-7H8V9.525h2V7.475c0-2.164,1.212-3.684,3.766-3.684l1.803,0.002v2.605
				h-1.197C13.378,6.398,13,7.144,13,7.836v1.69h2.568L15,12h-2v7h4c1.1,0,2-0.899,2-2V3C19,1.9,18.1,1,17,1z" />
        </svg>
    </a>
    <a class="inner" href="#">
        <svg viewBox="-238.2 241.8 18.4 18.4">
            <path d="M-229.4,248.4c-1.4-2.4-2.8-4.4-2.9-4.5c-2.2,1-3.8,3.1-4.3,5.5C-236.5,249.4-233.2,249.4-229.4,248.4z M-228.5,251.1
				c0.1,0,0.2-0.1,0.3-0.1c-0.2-0.4-0.4-0.9-0.6-1.3c-4,1.2-7.9,1.1-8.1,1.1c0,0.1,0,0.2,0,0.2c0,2,0.8,3.9,2,5.3l0,0
				C-234.8,256.2-232.7,252.4-228.5,251.1z M-233.8,257.2L-233.8,257.2c-0.1,0-0.1-0.1-0.2-0.1C-233.9,257.1-233.8,257.2-233.8,257.2z
				 M-230.9,243.4C-230.9,243.4-230.9,243.4-230.9,243.4C-230.9,243.4-230.9,243.4-230.9,243.4L-230.9,243.4z M-223.8,245.1
				c-1.4-1.2-3.2-2-5.2-2c-0.6,0-1.3,0.1-1.9,0.2c0.1,0.2,1.6,2.1,2.9,4.6C-225,246.8-223.8,245.1-223.8,245.1z M-229,260.2
				c-5.1,0-9.2-4.1-9.2-9.2c0-5.1,4.1-9.2,9.2-9.2c5.1,0,9.2,4.1,9.2,9.2C-219.8,256.1-223.9,260.2-229,260.2z M-227.7,252.3
				c-4.6,1.6-6.1,4.8-6.2,4.9c1.3,1,3,1.7,4.8,1.7c1.1,0,2.1-0.2,3.1-0.6C-226.1,257.5-226.5,255.1-227.7,252.3
				C-227.6,252.3-227.6,252.3-227.7,252.3z M-227.3,249.1c0.2,0.4,0.4,0.8,0.5,1.1c0.1,0.1,0.1,0.3,0.2,0.4c2.7-0.3,5.4,0.2,5.5,0.3
				c0-1.9-0.7-3.6-1.8-4.9C-222.9,246-224.2,247.9-227.3,249.1z M-226.1,251.9c1,2.8,1.4,5.1,1.5,5.6c1.8-1.2,3-3.1,3.4-5.3
				C-221.4,252.2-223.6,251.5-226.1,251.9z" />
        </svg>
    </a>
    <a class="inner" href="#">
        <svg viewBox="0 0 20 20">
            <path d="M10,2.3C0.172,2.3,0,3.174,0,10s0.172,7.7,10,7.7s10-0.874,10-7.7S19.828,2.3,10,2.3z M13.205,10.334l-4.49,2.096
				C8.322,12.612,8,12.408,8,11.974V8.026C8,7.593,8.322,7.388,8.715,7.57l4.49,2.096C13.598,9.85,13.598,10.15,13.205,10.334z" />
        </svg>
    </a>
</div>