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 @   ꧁执笔小白꧂  阅读(201)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 一文读懂知识蒸馏
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
点击右上角即可分享
微信分享提示