.title{

    height: 20vh;
    min-width: 100vw;
    display: flex;
    float: inline-start;
    justify-content: center;
    align-content: center;
    position: relative;
    top: -8.5vw;
}
.text{
    stroke: #ffffff;
    fill: none;
    stroke-width: 6;
    stroke-dasharray: 0,300;
    display: block;
    justify-self: center;
    width: 100vw;
    font-size: 20.5rem;
    font-family: "Adobe 楷体 Std R",SansSerif,sans-serif;
}
.animals:nth-child(1){
    stroke: #b21f66;
    animation: stroke1 5s cubic-bezier(0.4, 0, 0.2, 1) forwards , flow1 1s linear infinite; ;
}
.animals:nth-child(2){
    stroke: #fe346e;
    animation: stroke2 5s cubic-bezier(0.4, 0, 0.2, 1) forwards, flow2 1s linear infinite; ;
}
.animals:nth-child(3){
    stroke: #ffbd69;
    animation: stroke3 5s cubic-bezier(0.4, 0, 0.2, 1) forwards , flow3 1s linear infinite; ;
}

.animal{
    stroke: #FF5794;
    animation: stroke 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 1;

}
.animal-shadow{
    stroke: #d6d6d6;
    animation: stroke 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform: translate(0.35%,0.35%);
    z-index: -1;
}
@keyframes stroke1 {
    100%{
        stroke-dasharray: 20,40;
        stroke-dashoffset: 90;
    }
}
@keyframes stroke2 {
    100%{
        stroke-dasharray: 20,40;
        stroke-dashoffset: 50;
    }
}
@keyframes stroke3 {
    100%{
        stroke-dasharray: 20,40;
        stroke-dashoffset: 10;
    }
}
@keyframes flow1 {
    0% {
        stroke-dashoffset: 0;
        stroke-dashoffset: 90;
    }
    100% {
        stroke-dashoffset: 150; /* 将线条向左偏移，创造流动效果 */
    }
}
@keyframes flow2 {
    0% {
        stroke-dashoffset: 0;

        stroke-dashoffset: 50;
    }
    100% {
        stroke-dashoffset: 110; /* 将线条向左偏移，创造流动效果 */
    }
}
@keyframes flow3 {
    0% {
        stroke-dashoffset: 0;
        stroke-dashoffset: 10;
    }
    100% {
        stroke-dashoffset: 70; /* 将线条向左偏移，创造流动效果 */
    }
}
@keyframes stroke {
    100%{
        stroke-dasharray: 20,0;
        stroke-dashoffset: 10;
    }
}