有人能幫我復(fù)制馬恒達(dá)上的動(dòng)畫紅線嗎？

我已經(jīng)嘗試使用CSS，但它不起作用。

我已經(jīng)復(fù)制了現(xiàn)有的CSS，但我沒有運(yùn)氣，這似乎是一件簡單的事情，但我不能讓它工作。

編輯:我已經(jīng)讓它工作了，但只有在懸停時(shí)，有沒有辦法自動(dòng)完成？

這是我的代碼:

.content {
    position: absolute;
    width: 60%;
    left: calc(5% + 0.75rem);
    transform: translate(0, 0%);
    top: 20%;
    color: #000;
    z-index: 2;
}

.content:before {
    content: "";
    display: block;
    position: absolute;
    width: 120px;
    height: 8px;
    background: #dd052b;
    left: 0;
    top: 50px;
    transform: rotate(-20deg) skew(-20deg) translate(-120%, 0);
    clip-path: inset(0 100% 0 0);
}

.content:after {
    content: "";
    display: block;
    position: absolute;
    width: 120px;
    height: 8px;
    background: #dd052b;
    left: 0;
    bottom: auto;
    top: 50px;
    transform: rotate(-20deg) skew(-20deg) translate(200%, 0%);
    clip-path: inset(0 100% 0 0);
}

.content:hover:after {
    clip-path: inset(0 0% 0 0);
    transition: all 0.6s linear;
    transition-delay: 1s;
}

.content:hover:before {
    clip-path: inset(0 0% 0 0);
    transition: all 0.6s linear;
    transition-delay: 0s;
}

<div class="content text-center text-lg-start active">
    <small style="transform: translate3d(0px, 0px, 0px); opacity: 1; visibility: inherit;">ABOUT US</small>
    <h1 class="heading font-medium font-size-tb" style="transform: translate3d(0px, 0px, 0px); opacity: 1; visibility: inherit;">Planet, People, Trust</h1>
    <p style="transform: translate3d(0px, 0px, 0px); opacity: 1; visibility: inherit;">Committed to drive positive change across global markets and communities.</p>
</div>

基本上，你有::after和::before，你重寫了它們。既然你希望它是& quot自動(dòng)& quot，你應(yīng)該使用CSS動(dòng)畫。

我創(chuàng)作了一部動(dòng)畫。還增加了動(dòng)畫——延時(shí):750ms屬性make ::after在啟動(dòng)前等待750毫秒(因此::before將工作1000毫秒，750毫秒后::after將啟動(dòng))。還增加了不透明度:0；to ::after在放映::before的時(shí)候隱藏，在動(dòng)畫結(jié)束的時(shí)候改成1，還有我加了動(dòng)畫-填充-模式:forwards保持最后的狀態(tài)。

此外，我刪除了許多不需要的東西(除非您將它們用于其他目的)，所以這是最終的代碼:

.content {
    position: absolute;
    width: 60%;
    left: calc(5% + 0.75rem);
    transform: translate(0, 0%);
    top: 20%;
}

@keyframes animation {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0% 0 0);
        opacity: 1;
    }
}

.content:before {
    content: "";
    position: absolute;
    width: 120px;
    height: 8px;
    background: #dd052b;
    top: 50px;
    animation: animation 1s;
    transform: rotate(-20deg) skew(-20deg) translate(-120%, 0);
}

.content:after {
    opacity: 0;
    content: "";
    position: fixed;
    width: 120px;
    height: 8px;
    background: #dd052b;
    top: 50px;
    animation: animation 1s;
    animation-delay: 750ms;
    animation-fill-mode: forwards;
    transform: rotate(-20deg) skew(-20deg) translate(200%, 0%);
}

<div class="content">
    <small>ABOUT US</small>
    <h1>Planet, People, Trust</h1>
    <p>Committed to drive positive change across global markets and communities.</p>
</div>