<ul>

    <li><span></span><span></span><span></span><span></span><span class="fa-brands fa-weixin"></span></li>

    <li><span></span><span></span><span></span><span></span><span class="fa-brands fa-qq"></span></li>

    <li><span></span><span></span><span></span><span></span><span class="fa-brands fa-weibo"></span></li>

    <li><span></span><span></span><span></span><span></span><span class="fa-solid fa-mobile"></span></li>

</ul>

body {

    margin: 0;

    padding: 0;

    min-height: 90vh;

    display: flex;

    align-items: flex-end;

    justify-content: center;

}

ul {

    position: relative;

    margin: 0;

    padding: 0;

    display: flex;

    list-style: none;

}

ul li {

    position: relative;

    width: 80px;

    height: 80px;

    margin: 0 50px;

    /* 逆时针旋转30度，倾斜25度 */

    transform: rotate(-30deg) skew(25deg);

    background: transparent;

}

ul li span {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #dd4b39;

    transition: 0.5s;

    display: flex !important;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 40px !important;

    /* transform: rotate(360deg) skew(25deg); */

}

ul li:nth-child(1) span {

    background: #3bd999;

}

ul li:nth-child(2) span {

    background: #5165be;

}

ul li:nth-child(3) span {

    background: #e4405f;

}

ul li:nth-child(4) span {

    background: #60d0d8;

}

ul li:hover span:nth-child(5) {

    transform: translate(80px, -80px);

    opacity: 1;

}

ul li:hover span:nth-child(4) {

    transform: translate(60px, -60px);

    opacity: 0.8;

}

ul li:hover span:nth-child(3) {

    transform: translate(40px, -40px);

    opacity: 0.6;

}

ul li:hover span:nth-child(2) {

    transform: translate(20px, -20px);

    opacity: 0.4;

}

ul li:hover span:nth-child(1) {

    transform: translate(0, 0);

    opacity: 0.2;

}

​