效果图

使用教程

将代码粘贴在Zibll主题设置>页面&显示>顶部多功能组件>迭加搜索组件中即可

<style>
    .sc-card {
        display: flex;
        justify-content: center;
        position: relative;
        min-width: 60px;
        margin: 0 auto;
        background: rgb(255 255 255 / 50%);
    }

    .sc-card .icon-cover-icon {
        margin: 0 5px;
        transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.13, 1.34), margin-top 0.3s cubic-bezier(0.25, 0.1, 0.13, 1.34);
        z-index: 1;
        max-width: 100%;
        max-height: 100%;
    }

    .icon-cover-card:hover .icon-cover-icon:hover {
        transform: scale(1.2) translateY(-5px);
        z-index: 2;
        margin-top: -20px;
    }

    .icon-cover-card:hover .icon-cover-icons:hover {
        transform: scale(1.3);
    }

    @media screen and (max-width: 768px) {
        .sc-card {
            display: none;
        }
    }
</style>
<div class="icon-cover-card flex ac zib-widget sc-card">
    <a class="main-color" target="_blank" href="https://www.7khl.com/">
        <div class="icon-cover-icons" style="font-size: 25px">
            <img src="https://www.7khl.com/wp-content/themes/zibll/img/favicon.png" alt="访达"
                style="width: 60px;height: 60px">
        </div>
    </a>
    <a class="main-color" target="_blank" href="https://www.7khl.com/">
        <div class="icon-cover-icons" style="font-size: 25px">
            <img src="https://www.7khl.com/wp-content/themes/zibll/img/favicon.png" alt="CleanMyMac"
                style="width: 60px;height: 60px">
        </div>
    </a>
    <a class="main-color" target="_blank" href="https://www.7khl.com/">
        <div class="icon-cover-icons" style="font-size: 25px">
            <img src="https://www.7khl.com/wp-content/themes/zibll/img/favicon.png" alt="After Effects"
                style="width: 60px;height: 60px">
        </div>
    </a>
    <a class="main-color" target="_blank" href="https://www.7khl.com/">
        <div class="icon-cover-icons" style="font-size: 25px">
            <img src="https://www.7khl.com/wp-content/themes/zibll/img/favicon.png" alt="Photoshop"
                style="width: 60px;height: 60px">
        </div>
    </a>
    <a class="main-color" target="_blank" href="https://www.7khl.com/">
        <div class="icon-cover-icons" style="font-size: 25px">
            <img src="https://www.7khl.com/wp-content/themes/zibll/img/favicon.png" alt="Premiere Pro"
                style="width: 60px;height: 60px">
        </div>
    </a>
    <a class="main-color" target="_blank" href="https://www.7khl.com/">
        <div class="icon-cover-icons" style="font-size: 25px">
            <img src="https://www.7khl.com/wp-content/themes/zibll/img/favicon.png" alt="Sketch"
                style="width: 60px;height: 60px">
        </div>
    </a>
    <a class="main-color" target="_blank" href="https://www.7khl.com/">
        <div class="icon-cover-icons" style="font-size: 25px">
            <img src="https://www.7khl.com/wp-content/themes/zibll/img/favicon.png" alt="Downie"
                style="width: 60px;height: 60px">
        </div>
    </a>
    <a class="main-color" target="_blank" href="https://www.7khl.com/">
        <div class="icon-cover-icons" style="font-size: 25px">
            <img src="https://www.7khl.com/wp-content/themes/zibll/img/favicon.png" alt="DaVinci Resolve"
                style="width: 60px;height: 60px">
        </div>
    </a>
    <a class="main-color" target="_blank" href="https://www.7khl.com/">
        <div class="icon-cover-icons" style="font-size: 25px">
            <img src="https://www.7khl.com/wp-content/themes/zibll/img/favicon.png" alt="Cinema 4D"
                style="width: 60px;height: 60px">
        </div>
    </a>
    <a class="main-color" target="_blank" href="https://www.7khl.com/">
        <div class="icon-cover-icons" style="font-size: 25px">
            <img src="https://www.7khl.com/wp-content/themes/zibll/img/favicon.png" alt="WeChat"
                style="width: 60px;height: 60px">
        </div>
    </a>
    <a class="main-color" target="_blank" href="https://www.7khl.com/">
        <div class="icon-cover-icons" style="font-size: 25px">
            <img src="https://www.7khl.com/wp-content/themes/zibll/img/favicon.png" alt="Parallels Desktop"
                style="width: 60px;height: 60px">
        </div>
    </a>
    <a class="main-color" target="_blank" href="https://www.7khl.com/">
        <div class="icon-cover-icons" style="font-size: 25px">
            <img src="https://www.7khl.com/wp-content/themes/zibll/img/favicon.png" alt="Office"
                style="width: 60px;height: 60px">
        </div>
    </a>
    <a class="main-color" target="_blank" href="https://www.7khl.com/">
        <div class="icon-cover-icons" style="font-size: 25px">
            <img src="https://www.7khl.com/wp-content/themes/zibll/img/favicon.png" alt="AlDente"
                style="width: 60px;height: 60px">
        </div>
    </a>
</div>

原作者苏晨