css实现悬浮微信二维码

原创

Bili执笔小白 2024-08-09 13:49:33 博主文章分类：前端 ©著作权

©著作权归作者所有：来自51CTO博客作者Bili执笔小白的原创作品，请联系作者获取转载授权，否则将追究法律责任

/*微信二维码*/
.weixin{
    position:relative;
}
    .weixin::after {
        content: url("../images/wx.jpg");
        position: absolute;
        right: 15px;
        top: -260px;
        z-index: 99;
        width: 260px;
        height: 260px;
        border: 5px solid #0095ba;
        border-radius: 4px;
        transform-origin: top right;
        transform: scale(0);
        opacity: 0;
        -webkit-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }
.weixin:hover::after{
    transform:scale(1);
    opacity: 1;
}
.gzhclass {
    padding: 1em 1em 0 1em;
    margin-left: 1.5em;
    margin-right: 1.5em;
    text-align: center;
    height: 100%;
    width: 15%;
    font-family: 'Slabo27px-Regular';
    font-size: 30px;
    color: #835253;
    box-sizing: border-box;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    display: inline-block;
    border: 1px solid #E5E5E5;
}