.tupianzuoyouyaobai {
        width: 120px; /* 设置容器宽度 */
        height: 130px; /* 设置容器高度 */
        display: inline-block; /* 设置为行内块级元素 */
        background: url('/images/左右摇摆.webp') no-repeat 50%/100%; /* 设置背景图片，居中显示并覆盖整个容器 */
        vertical-align: middle; /* 垂直对齐方式为居中 */
        position: fixed; /* 固定定位，相对于浏览器窗口定位 */
        left: 1%; /* 距离左侧位置 */
        top: 45px; /* 距离顶部位置 */
        z-index: 50; /* 设置堆叠顺序为50 */
        cursor: pointer; /* 鼠标悬停时显示手型指针 */
        animation: lampLine-38cc6824 1.2s ease-in-out 0s infinite alternate; /* 应用摇摆动画 */
        margin-left: -1px; /* 左侧外边距-1像素，用于微调位置 */
        transform-origin: 50% 0; /* 设置变换原点为水平居中、顶部 */
        pointer-events: auto; /* 允许元素接收鼠标事件，这是实现悬停效果的关键 */
        transition: opacity 0.8s ease; /* 为原图片添加透明度过渡效果，持续时间0.8秒 */
    }

    /* 使用伪元素创建第二张图片层 */
    .tupianzuoyouyaobai::before {
        content: ''; /* 伪元素必须设置content属性 */
        position: absolute; /* 绝对定位，相对于父元素定位 */
        top: 0; /* 顶部对齐 */
        left: 0; /* 左侧对齐 */
        width: 100%; /* 宽度100%，与父元素同宽 */
        height: 100%; /* 高度100%，与父元素同高 */
        background: url('/images/左右摇摆.gif') no-repeat 50%/100%; /* 设置第二张背景图片，请替换为实际图片路径 */
        opacity: 0; /* 初始完全不透明，隐藏第二张图片 */
        transition: opacity 1s ease; /* 设置透明度过渡效果，持续时间1秒，缓动函数 */
        z-index: 51; /* 堆叠顺序比原图片高，确保显示在上层 */
        border-radius: inherit; /* 继承父元素的边框圆角 */
    }

    /* 鼠标悬停状态下的样式 */
    .tupianzuoyouyaobai:hover {
        /* 可以在这里添加对原图片的悬停效果 */
        filter: brightness(0.9); /* 降低原图片亮度，让第二张图片更突出 */
    }

    .tupianzuoyouyaobai:hover::before {
        opacity: 1; /* 完全不透明，完全显示第二张图片 */
    }

    /* 定义摇摆动画的关键帧 */
    @keyframes lampLine-38cc6824 {
        0% {
            transform: rotate(10deg) /* 起始状态：顺时针旋转10度 */
        }
        to {
            transform: rotate(-10deg) /* 结束状态：逆时针旋转10度 */
        }
    }

    /* 媒体查询：在小于等于768px的屏幕上隐藏元素 */
    @media only screen and (max-width: 768px) {
        .tupianzuoyouyaobai {
            display: none; /* 隐藏元素 */
        }
    }










/* 原版本，后续增加了第二张图片的显示
.tupianzuoyouyaobai {
    width: 150px;
    height: 160px;
    display: inline-block;
    background: url('/images/左右摇摆.webp') no-repeat 50%/100%;
    vertical-align: middle;
    position: fixed;
    right: 10%;
    top: 10px;
    z-index: 50;
    cursor: pointer;
    animation: lampLine-38cc6824 1.2s ease-in-out 0s infinite alternate;
    margin-left: -1px;
    transform-origin: 50% 0;
    pointer-events:none;
}
@keyframes lampLine-38cc6824 {
    0% {
        transform: rotate(10deg)
    }
    to {
        transform: rotate(-10deg)
    }
}
@media only screen and (max-width: 768px) {
    .tupianzuoyouyaobai {
        display: none;
    }
}
*/