//wegame.gtimg.com/g.55555-r.c4663/wegame-home/sc01-logo.52fe03c4.svg

​

html, body {

    width: 100%;

    height: 100%;

    // overflow: hidden;

}

​

.g-scroll {

    position: relative;

    width: 100vw;

    height: 500vh;

}

​

.g-wrap {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    overflow: hidden;

}

​

body {

    display: grid;

    place-content: center;

}

​

.g-container {

    position: absolute;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    animation-name: scale;

    animation-duration: 10s;

    animation-timeline: box-move;

}

​

.g-bg {

    position: fixed;

    width: 100vw;

    height: 100vh;

    // background: repeating-linear-gradient(45deg, #000, #000 10px, #fff 10px, #fff 20px);

    background: url(https://wegame.gtimg.com/g.55555-r.c4663/wegame-home/sc02-03.514d7db8.png);

    background-size: 80%;

    background-position: center;

    background-repeat: no-repeat;

}

​

.g-wegame {

    position: absolute;

    width: 100vw;

    height: 100vh;

    background: linear-gradient(-75deg, #715633, #2b2522);

    mask: url(//wegame.gtimg.com/g.55555-r.c4663/wegame-home/sc01-logo.52fe03c4.svg), linear-gradient(#fff, #fff);

    mask-repeat: no-repeat;

    mask-position: center center;

    -webkit-mask-composite: xor;

}

​

.g-mask {

    position: aboslute;

    width: 100vw;

    height: 100vh;

    background: linear-gradient(-75deg, #715633, #2b2522);

    z-index: 2;

    animation-name: reOpacityChange;

    animation-duration: 10s;

    animation-timeline: box-move;

    animation-function-timing: linear;

}

​

.g-logo {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(calc(-50% - 2px), calc(-50% - 2px));

    width: 448px;

    height: 532px;

    background: url(//wegame.gtimg.com/g.55555-r.c4663/wegame-home/sc01-logo.52fe03c4.svg);

    background-repeat: no-repeat;

    background-position: center center;

    z-index: 3;

    animation-name: reOpacityChange;

    animation-duration: 10s;

    animation-timeline: box-move;

}

​

@scroll-timeline box-move {

    source: selector("#g-scroll");

    orientation: "vertical";

}

@keyframes reOpacityChange {

    0%,

    50% {

        opacity: 1;

    }

    90% {

        opacity: .2;

    }

    100% {

        opacity: 0;

    }

}

​

@keyframes scale {

    0% {

        transform: scale(1);

    }

    40% {

        transform: scale(5);

    }

    70% {

        transform: scale(20)

    }

    100% {

        transform: scale(60);

    }

}