css实现悬浮微信二维码

/*微信二维码*/
.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;
}
<div class="weixin"></div>

 

posted @ 2021-06-15 12:04  ꧁执笔小白꧂  阅读(173)  评论(0编辑  收藏  举报