### [分享一个微信&QQ联系的动态翻转HTML](https://guaqi.com/topic/78121)

**Published:** 2026-10-12T03:43:49

**Author:** 重生之我用瓜奇赚大钱

**Excerpt:** 从其他站拿过来小改了下，感觉放在侧边栏还是挺好看的演示效果HTML 记得调整下容器里的内边距哦～附件在这

从其他站拿过来小改了下，感觉放在侧边栏还是挺好看的

## 演示效果

![分享一个微信&QQ联系的动态翻转HTML](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg "image-1203524eb7-1")

## HTML

```html
<style>
    .huiui-card {
        --card-height: 110px;
        --card-shadow: 0 8px 16px -4px #2c2d300c;
        --card-face-bg: none;
        --card-back-bg: none;
        --card-overlay-bg: none;
        --card-bg: #fff;
        box-shadow: var(--card-shadow);
        background: var(--card-bg);
        border: 1px solid #e3e8f7;
        border-radius: 12px;
        position: relative;
        overflow: hidden;
        padding: 1rem 1.2rem;
        transition: 0.3s;
    }

    .huiui-card--wechat {
        --card-bg: #57bd6a;
        --card-face-bg: url(https://cdn.huiui.net/uploads/20261012101155.webp);
        --card-back-bg: url(https://cdn.huiui.net/uploads/20261012101132.webp);
        --card-overlay-bg: url(https://cdn.huiui.net/uploads/20261012101113.webp);
    }

    .huiui-card--qq {
        --card-bg: #00aef8;
        --card-face-bg: url(https://cdn.huiui.net/uploads/20261012101052.webp);
        --card-back-bg: url(https://cdn.huiui.net/uploads/20261012100758.webp);
        --card-overlay-bg: url(https://cdn.huiui.net/uploads/20261012100840.webp);
    }

    .huiui-card--featured {
        display: flex;
        justify-content: center;
        align-content: center;
        padding: 0;
        cursor: pointer;
        border: none;
        height: var(--card-height);
    }

    .huiui-card--featured::before {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: var(--card-overlay-bg) center center no-repeat;
        content: '';
        transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease-in;
        transform: translateY(0);
        opacity: 1;
    }

    .huiui-card--featured:hover::before {
        transform: translateY(36px);
        opacity: 0;
    }

    .huiui-flip-wrapper {
        position: relative;
        width: 220px;
        height: var(--card-height);
        z-index: 2;
    }

    .huiui-flip-content {
        width: 100%;
        height: 100%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        transition: cubic-bezier(0, 0, 0, 1.29) 0.3s;
    }

    .huiui-card--featured:hover .huiui-flip-content {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .huiui-card-face {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        background: var(--card-face-bg) center center no-repeat;
        background-size: 100%;
    }

    .huiui-card-face--back {
        display: block;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        box-sizing: border-box;
        background: var(--card-back-bg) center center no-repeat;
        background-size: 100%;
    }

    .huiui-card--featured img {
        max-height: var(--card-height);
        object-fit: cover;
    }
</style>
<div class="huiui-card huiui-card--featured huiui-card--wechat"
    onclick="window.open('https://cdn.huiui.net/file/wxgzh.html');">
    <div class="huiui-flip-wrapper">
        <div class="huiui-flip-content">
            <div class="huiui-card-face"></div>
            <div class="huiui-card-face huiui-card-face--back"></div>
        </div>
    </div>
</div>

<div class="huiui-card huiui-card--featured huiui-card--qq"
    onclick="window.open('https://qm.qq.com/q/iVouxBVZFm');">
    <div class="huiui-flip-wrapper">
        <div class="huiui-flip-content">
            <div class="huiui-card-face"></div>
            <div class="huiui-card-face huiui-card-face--back"></div>
        </div>
    </div>
</div>
```

### 记得调整下容器里的内边距哦～

![分享一个微信&QQ联系的动态翻转HTML](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg "image-120301d5e1-1")

附件在这



**Comments:** 

**春哥:** 悬停翻转到一半那个过渡挺顺的，比直接切换自然多了。侧边栏宽度不大的话这个尺寸刚好。



---