css word animation

katsu 发布于 2024-09-17 129 次阅读

code

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Ultra&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./src/css/forTest.css">
    <title>WordAnimation</title>

</head>

<body>
    <div class="container">
        <div class="circle circle-1"></div>
        <div class="circle circle-2"></div>
        <div class="text text_circle">someText</div>
    </div>
    <div class="container">
        <div class="circle shadowC-1"></div>
        <div class="circle shadowC-2"></div>
        <div class="text text_circle">someText</div>
    </div>

    <div class="container">
        <div class="linear tr1"></div>
        <div class="linear tr2"></div>
        <div class="linear bl1"></div>
        <div class="linear bl2"></div>
        <div class="text text_linear">someText</div>
    </div>

    <div class="container container_cross">
        <div class="cross">
            <div class="text_container">
                <div class="cross_text_slide">T</div>
            </div>
        </div>
        <div class="cross">
            <div class="text_container">
                <div class="cross_text_slide">E</div>
            </div>
        </div>
        <div class="cross">
            <div class="text_container">
                <div class="cross_text_slide">X</div>
            </div>
        </div>
        <div class="cross">
            <div class="text_container">
                <div class="cross_text_slide">T</div>
            </div>
        </div>
    </div>

    <div class="container arrow-container">
        <div class="arrow arrow_grey"></div>
        <div class="arrow arrow_black"></div>

        <div class="text arrow_text">someText</div>
    </div>

    <div class="container">
        <div class="circle test-1"></div>
        <div class="circle test-2"></div>
        <div class="text test-text">someText</div>
    </div>

</body>

</html>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

.container {
    position: relative;
    width: 300px;
    height: 300px;
}

/* circle & shaowCircle animation */
.circle {
    width: 240px;
    height: 240px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    opacity: 0;
}

.circle-1 {
    animation: expand 0.5s ease-out 0.1s forwards;
}

.circle-2 {
    width: 90px;
    height: 90px;
    animation: expand 0.5s ease-out 0.2s forwards;
}

.text {
    position: absolute;
    top: 50%;
    left: 50%;
    /* transform: translate(-50%, -50%);  会被动画命令中的transform覆盖！*/
    font-size: 24px;
    font-weight: bolder;
    /* opacity: 0; */

}

.text.text_circle {
    animation: fadeIn 0.5s linear forwards;
}

.shadowC-1 {
    border: none;
    animation: expand 0.8s ease-out 0.1s forwards;
    background-image: radial-gradient(circle, transparent 50px, rgba(1, 1, 9, 0.289));

}

.shadowC-2 {
    border: none;
    animation: expand 0.8s ease-out 0.2s forwards;
    background-image: radial-gradient(circle, transparent 20px, rgba(1, 1, 9, 0.289) calc(100px / 2 - 1px), transparent calc(100px / 2));

}

/* like a cat animation == */

.text.text_linear {
    top: 42%;
    left: 49%;
    animation: textLinear 0.5s linear forwards;
}

.linear.tr1 {
    opacity: 0;
    top: 34%;
    /* border-color: red; */
    right: 19%;
    transform: rotate(-35deg);
    animation:
        linearExpandTR1 0.3s ease-out 0.5s forwards,
        contractTR1 0.25s ease-out 0.84s forwards;

}

.linear.tr2 {
    opacity: 0;
    top: 40%;

    right: 15%;
    transform: rotate(-15deg);
    animation:
        linearExpandTR2 0.3s ease-out 0.5s forwards,
        contractTR2 0.25s ease-out 0.84s forwards;
}

.linear.bl1 {
    opacity: 0;
    top: 51%;
    /* border-color: red; */
    right: 75%;
    transform: rotate(-35deg);
    animation:
        linearExpandBL1 0.3s ease-out 0.5s forwards,
        contractBL1 0.25s ease-out 0.84s forwards;
}

.bl2 {
    opacity: 0;
    top: 45%;

    right: 77%;
    transform: rotate(-15deg);
    animation:
        linearExpandBL2 0.3s ease-out 0.5s forwards,
        contractBL2 0.25s ease-out 0.84s forwards;
}

.linear {
    position: absolute;
    /* 改为绝对定位 */
    width: 25px;

    border: 0;
    border-top: 3px solid #333;
    border-radius: 2px;
}

/* test */

.test-1 {
    opacity: 0;
    background-image: radial-gradient(circle, transparent 50px, rgba(1, 1, 9, 0.289));
}

.test-2 {
    opacity: 0;
    background-image: radial-gradient(circle, transparent 20px, rgba(1, 1, 9, 0.289) calc(100px / 2 - 1px), transparent calc(100px / 2));
}

.test-text {
    opacity: 0;
}

/* cross animation xxxx */
.container.container_cross {
    /* width: 150px; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.text_container {
    position: absolute;
    left: 26%;
    top: 28%;
    width: 400px;
    overflow: hidden;
    height: 50px;

}

.cross_text_slide {

    position: absolute;
    display: inline-block;
    font-family: "Ultra", serif;
    left: -100%;
    white-space: nowrap;
    font-weight: 400;
    font-style: normal;
    font-size: 25px;
    opacity: 0;

    animation: crossText 2s ease-out 0.5s forwards;

    width: 20px;

}

.cross:nth-child(2) .cross_text_slide,
.cross:nth-child(4) .cross_text_slide {
    animation-delay: 0.7s;
}

.cross {
    display: block;
    width: 60px;
    height: 60px;
    position: relative;
    margin-left: -20px;

}

.cross::before,
.cross::after {
    content: "";
    position: absolute;
    background-color: #333;
    /*  */
    left: 15%;
    top: 50%;
    height: 5px;
    border-radius: 3px;
    width: 30px;
    opacity: 0;
}

.cross::before {

    transform: translateY(-50%) rotate(45deg);

    animation: drawLine1 0.3s linear 0.5s forwards,
        eraseLine1 0.3s linear 1.3s forwards;
}

.cross::after {
    transform: translateY(-50%) rotate(-45deg);
    animation: drawLine2 0.3s linear 0.5s forwards,
        eraseLine1 0.3s linear 1.3s forwards;
}

.cross:nth-child(2)::before,
.cross:nth-child(2)::after {
    animation-delay: 0.6s, 1.4s;
}

.cross:nth-child(3)::before,
.cross:nth-child(3)::after {
    animation-delay: 0.7s, 1.5s;
}

.cross:nth-child(4)::before,
.cross:nth-child(4)::after {
    animation-delay: 0.8s, 1.6s;
}

/* arrow animatiom */

.container.arrow-container {
    width: 200px;
    height: 60px;

    position: relative;
    overflow: hidden;
}

.arrow {
    width: 160px;
    height: 40px;

    position: absolute;
    top: 10px;
    left: -120%;

}

.arrow::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 0;
    width: 0;
    height: 0;

}

.arrow::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 0;
    width: 0;
    height: 0;

}

.arrow.arrow_black{
    background-color: #000;
    animation: arrow_slide 1s ease-out 0.45s forwards;
}
.arrow_black::before{
    border-top: 20px solid #000;
    border-bottom: 20px solid #000;
    border-left: 20px solid transparent;
}
.arrow_black::after{
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #000;
}

.arrow_grey{
    width: 300px;
    left: -200%;
    background-color: #ccc;
    animation: arrow_slide_grey 1.3s ease-in forwards;
}

.arrow_grey::before {
    border-top: 20px solid #ccc;
    border-bottom: 20px solid #ccc;
    border-left: 20px solid transparent;
}

.arrow_grey::after {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #ccc;
}

.text.arrow_text{
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    opacity: 0;
    animation: show_arrow_text 0.1s ease-out 0.8s forwards;
}
/* all keyframes */
@keyframes expand {
    0% {
        transform: translate(-50%, -50%) scale(0.01);
        opacity: 0;
    }

    50% {

        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        transform: translate(-50%, -50%) scale(0.1);
        /* opacity: 0; */
    }

    70% {
        transform: translate(-50%, -50%) scale(1.2);
        /* opacity: 1; */
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes linearExpandTR1 {
    0% {
        opacity: 1;
        transform-origin: left center;
        /* 设置变换原点为左侧中心 */
        transform: rotate(-35deg) scaleX(0);
        /* 初始状态为0宽度 */
    }

    100% {
        opacity: 1;
        transform: rotate(-35deg) scaleX(1);
        transform-origin: left center;
        /* 最终状态为完整宽度 */
    }

}

@keyframes contractTR1 {
    0% {
        clip-path: inset(0 0 0 0);
    }

    100% {
        clip-path: inset(0 0 0 100%);
    }
}

@keyframes linearExpandTR2 {
    0% {
        opacity: 1;
        transform-origin: left center;
        /* 设置变换原点为左侧中心 */
        transform: rotate(-15deg) scaleX(0);
        /* 初始状态为0宽度 */
    }

    100% {
        opacity: 1;
        transform: rotate(-15deg) scaleX(1);
        transform-origin: left center;
        /* 最终状态为完整宽度 */
    }

}

@keyframes contractTR2 {
    0% {

        clip-path: inset(0 0 0 0);
    }

    100% {
        clip-path: inset(0 0 0 100%);
    }
}

@keyframes linearExpandBL1 {
    0% {
        opacity: 1;
        transform-origin: right center;
        /* 设置变换原点为左侧中心 */
        transform: rotate(-35deg) scaleX(0);
        /* 初始状态为0宽度 */
    }

    100% {
        opacity: 1;
        transform: rotate(-35deg) scaleX(1);
        transform-origin: right center;
        /* 最终状态为完整宽度 */
    }

}

@keyframes contractBL1 {
    0% {
        clip-path: inset(0 0 0 0);
    }

    100% {
        clip-path: inset(0 100% 0 0);
    }
}

@keyframes linearExpandBL2 {
    0% {
        opacity: 1;
        transform-origin: right center;
        /* 设置变换原点为左侧中心 */
        transform: rotate(-15deg) scaleX(0);
        /* 初始状态为0宽度 */
    }

    100% {
        opacity: 1;
        transform: rotate(-15deg) scaleX(1);
        transform-origin: right center;
        /* 最终状态为完整宽度 */
    }

}

@keyframes contractBL2 {
    0% {
        clip-path: inset(0 0 0 0);
    }

    100% {
        clip-path: inset(0 100% 0 0);
    }
}

@keyframes textLinear {
    0% {
        top: 42%;
        left: 49%;
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }

    80% {
        top: 42%;
        left: 49%;
        transform: translate(-50%, -50%) scale(0.8);

    }

    100% {
        top: 42%;
        left: 49%;
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

}

@keyframes drawLine1 {

    0% {
        opacity: 1;
        transform-origin: left center;
        /* 设置变换原点为左侧中心 */
        transform: rotate(45deg) translateY(-15px) scaleX(0);
        /* 初始状态为0宽度 */
    }

    100% {
        opacity: 1;
        transform: rotate(45deg) translateY(-15px) scaleX(1);
        transform-origin: left center;
        /* 最终状态为完整宽度 */
    }
}

@keyframes drawLine2 {

    0% {
        opacity: 1;
        transform-origin: left center;
        /* 设置变换原点为左侧中心 */
        transform: rotate(-45deg) translateY(15px) scaleX(0);
        /* 初始状态为0宽度 */
    }

    100% {
        opacity: 1;
        transform: rotate(-45deg) translateY(15px) scaleX(1);
        transform-origin: left center;
        /* 最终状态为完整宽度 */
    }
}

@keyframes eraseLine1 {
    0% {
        clip-path: inset(0 0 0 0);
    }

    100% {
        clip-path: inset(0 0 0 100%);
    }
}

@keyframes crossText {
    0% {
        opacity: 0;
        left: -100%;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}

@keyframes arrow_slide {
    0% {
        left: -120%;
    }

    100% {
        left: 120%;
    }
}

@keyframes arrow_slide_grey {
    0% {
        left: -200%;
    }

    100% {
        left: 120%;
    }
}

@keyframes show_arrow_text {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }

}