* {
    margin: 0%;
    padding: 0%;
    list-style-type: none;
}

body {
    width: 100vw;
    height: 100vh;
    background-image: url(../img/11.png);
    background-attachment: fixed;
    background-size: cover;
}

:root {
    --a: 36deg;
    --b: 500px;
}

.big-box {
    position: relative;
}

.photo-box {
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    display: block;
    position: absolute;
    top: 0%;
    left: 0%;
    bottom: 0%;
    right: 0%;
    margin: 200px auto;
    transform: rotateY(-10deg) rotateX(-13deg);
    animation: img-ani1 10s linear infinite;
}

.photo-box>img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    box-shadow: 0px 0px 10px 10px pink;
    opacity: 0.8;
    -webkit-box-reflect: below 1px -webkit-gradient(linear, 0% 100%, 100% 100%, from(rgba(255, 255, 255, 0)),
            to(white));
}

.photo-box>img:nth-of-type(1) {
    transform: rotateY(calc(var(--a) * 1)) translateZ(var(--b));
}

.photo-box>img:nth-of-type(2) {
    transform: rotateY(calc(var(--a) * 2)) translateZ(var(--b));
}

.photo-box>img:nth-of-type(3) {
    transform: rotateY(calc(var(--a) * 3)) translateZ(var(--b));
}

.photo-box>img:nth-of-type(4) {
    transform: rotateY(calc(var(--a) * 4)) translateZ(var(--b));
}

.photo-box>img:nth-of-type(5) {
    transform: rotateY(calc(var(--a) * 5)) translateZ(var(--b));
}

.photo-box>img:nth-of-type(6) {
    transform: rotateY(calc(var(--a) * 6)) translateZ(var(--b));
}

.photo-box>img:nth-of-type(7) {
    transform: rotateY(calc(var(--a) * 7)) translateZ(var(--b));
}

.photo-box>img:nth-of-type(8) {
    transform: rotateY(calc(var(--a) * 8)) translateZ(var(--b));
}

.photo-box>img:nth-of-type(9) {
    transform: rotateY(calc(var(--a) * 9)) translateZ(var(--b));
}

.photo-box>img:nth-of-type(10) {
    transform: rotateY(calc(var(--a) * 10)) translateZ(var(--b));
}

@keyframes img-ani1 {
    0% {
        transform: rotateY(-10deg) rotateX(-13deg);
    }

    50% {
        transform: rotateY(-180deg) rotateX(33deg);
    }

    100% {
        transform: rotateY(-370deg) rotateX(-13deg);
    }
}

.lyric-box {
    width: 600px;
    height: 100px;
    position: fixed;
    top: 0%;
    left: 0%;
    bottom: 0%;
    right: 0%;
    margin: 500px auto;
    font-size: 32px;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    font-family: "华文隶书";
    overflow: hidden;
}

.lyric-box>li {
    width: 100%;
    height: 50%;
    background: linear-gradient(to right, deeppink 25%, rgb(153, 0, 255),
            rgb(20, 137, 255) 65%);
    -webkit-background-clip: text;
    color: transparent;
    animation: lyric-ani 188s linear 3s forwards;
}

@keyframes lyric-ani {
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(-4300%);
    }
}

.photo-box2 {
    width: 150px;
    height: 150px;
    transform-style: preserve-3d;
    display: block;
    position: absolute;
    top: 0%;
    left: 0%;
    bottom: 0%;
    right: 0%;
    margin: 100px auto;
    transform: rotateY(-15deg) rotateX(-20deg);
    animation: img-ani 5s infinite linear;
}

.photo-box2>img {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 20px;
    box-shadow: 0px 0px 10px 20px skyblue;
    opacity: 0.7;
}

.photo-box2>img:nth-of-type(1) {
    transform: rotateY(90deg) translateZ(100px);
}

.photo-box2>img:nth-of-type(2) {
    transform: rotateY(180deg) translateZ(100px);

}

.photo-box2>img:nth-of-type(3) {
    transform: rotateY(270deg) translateZ(100px);
}

.photo-box2>img:nth-of-type(4) {
    transform: rotateY(360deg) translateZ(100px);
}

.photo-box2>img:nth-of-type(5) {
    transform: rotateX(270deg) translateZ(100px);
}

.photo-box2>img:nth-of-type(6) {
    transform: rotateX(-270deg) translateZ(100px);
}

@keyframes img-ani {
    0% {
        transform: rotateY(90deg) rotateX(-20deg);
    }

    50% {
        transform: rotateY(-100deg) rotateX(30deg) rotateZ(-30deg);
    }

    100% {
        transform: rotateY(-270deg) rotateX(-20deg);
    }
}

.tit-box {

    margin: auto;
    animation: h2-ani 2s linear infinite;
}

.tit-box>h2 {
    text-align: center;
    font-size: 36px;
    background: linear-gradient(to right, red 35%, blue,
            red 65%);
    -webkit-background-clip: text;
    color: transparent;
    font-family: "华文彩云";
}

@keyframes h2-ani {
    0% {
        transform: scale(0.5, 0.5);
    }

    50% {
        transform: scale(1.2, 1.2);
    }

    100% {
        transform: scale(0.5, 0.5);
    }
}