分享一下凹凸魔女的母女故事官网的动态背景代码

图片[1]-分享一下凹凸魔女的母女故事官网的动态背景代码-初一小盏

CSS

body {
    width: 100%;
    height: 100%;
    color: #4c331e;
    line-height: 1.8;
    background: url(https://www.vxras.com/wp-content/uploads/2023/12/bg.png) top left,#fff;
    animation: bgLoop 30s linear infinite;
}
@-webkit-keyframes bgLoop {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: -1366px 768px
    }
}

@keyframes bgLoop {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: -1366px 768px
    }
}

@media screen and (max-width: 900px) {
    @-webkit-keyframes bgLoop {
        100% {
            background-position:-683px 384px
        }
    }

    @keyframes bgLoop {
        100% {
            background-position: -683px 384px
        }
    }
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0)
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg)
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0)
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg)
    }
}
© 版权声明
THE END
点赞0赞赏 分享
评论 共1条

请登录后发表评论