*{
    padding: 0;
    margin: 0;
}

body
{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500vh;
    /* vh是视窗高度的百分比，%是父元素高度的百分比 */
}

img.animationchange1{
    background-color: #666;
    height: 60rem;
    width: 10rem;
    margin: 0.7rem;
    margin-top: 30px;
    border-radius: 20rem;

    object-fit: cover;
    /* 用的CSS变量，下面可以调用它 */
    --expand-width: 100rem;
    --shrink-width: 10rem;
    --expand-radius: 3.6rem;
    --shrink-radius:20rem;
}

/* 设计展开收起的动画 */
i:nth-child(1) img.animationchange1
{
    animation: swiper 54s infinite;
}
i:nth-child(2) img.animationchange1
{
    animation: swiper 54s 6s infinite;
}
i:nth-child(3) img.animationchange1
{
    animation: swiper 54s 12s infinite;
}
i:nth-child(4) img.animationchange1
{
    animation: swiper 54s 18s infinite;
}
i:nth-child(5) img.animationchange1
{
    animation: swiper 54s 24s infinite;
}
i:nth-child(6) img.animationchange1
{
    animation: swiper 54s 30s infinite;
}
i:nth-child(7) img.animationchange1
{
    animation: swiper 54s 36s infinite;
}
i:nth-child(8) img.animationchange1
{
    animation: swiper 54s 42s infinite;
}
i:nth-child(9) img.animationchange1
{
    animation: swiper 54s 48s infinite;
}

/* 设计文字淡入淡出动画 */

p.Textshow1
{
    color: rgba(0,0,0,0);
    font-size: 30px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-style: normal;
    overflow: hidden;
    white-space: nowrap;
    text-indent: -9999px;
    animation: te 54s infinite;
}
p.Textshow2
{
    color: rgba(0,0,0,0);
    font-size: 30px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-style: normal;
    overflow: hidden;
    white-space: nowrap;
    text-indent: -9999px;
    animation: te 54s 6s infinite;
}
p.Textshow3
{
    color: rgba(0,0,0,0);
    font-size: 30px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-style: normal;
    overflow: hidden;
    white-space: nowrap;
    text-indent: -9999px;
    animation: te 54s 12s infinite;
}
p.Textshow4
{
    color: rgba(0,0,0,0);
    font-size: 30px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-style: normal;
    overflow: hidden;
    white-space: nowrap;
    text-indent: -9999px;
    animation: te 54s 18s infinite;
}
p.Textshow5
{
    color: rgba(0,0,0,0);
    font-size: 30px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-style: normal;
    overflow: hidden;
    white-space: nowrap;
    text-indent: -9999px;
    animation: te 54s 24s infinite;
}
p.Textshow6
{
    color: rgba(0,0,0,0);
    font-size: 30px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-style: normal;
    overflow: hidden;
    white-space: nowrap;
    text-indent: -9999px;
    animation: te 54s 30s infinite;
}
p.Textshow7
{
    color: rgba(0,0,0,0);
    font-size: 30px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-style: normal;
    overflow: hidden;
    white-space: nowrap;
    text-indent: -9999px;
    animation: te 54s 36s infinite;
}
p.Textshow8
{
    color: rgba(0,0,0,0);
    font-size: 30px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-style: normal;
    overflow: hidden;
    white-space: nowrap;
    text-indent: -9999px;
    animation: te 54s 42s infinite;
}
p.Textshow9
{
    color: rgba(0,0,0,0);
    font-size: 30px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-style: normal;
    overflow: hidden;
    white-space: nowrap;
    text-indent: -9999px;
    animation: te 54s 48s infinite;
}
@keyframes swiper
{
    0%{
        width:var(--shrink-width);
        border-radius: var(--shrink-radius);
    }
    1%{
        width:var(--expand-width);
        border-radius: var(--expand-radius);
    }
    20%{
        width:var(--expand-width);
        border-radius: var(--expand-radius);
    }
    21%{
        width:var(--shrink-width);
        border-radius: var(--shrink-radius);
    }
    100%{
        width:var(--shrink-width);
        border-radius: var(--shrink-radius);
    }
}

@keyframes te
{
    0%{
        color: rgba(0,0,0,0);
        text-indent: -9999px;
    }
    1%{
        color: rgba(0,0,0,1);
        text-indent: 1px;
    }
    20%{
        color: rgba(0,0,0,1);
        text-indent: 1px;
    }
    21%{
        color: rgba(0,0,0,0);
        text-indent: -9999px;
    }
    100%{
        color: rgba(0,0,0,0);
        text-indent: -9999px;
    }
}