如何在“正常”文本后的CSS中使闪烁的“光标/矩形”闪烁？

Question

我想做的是使“我的名字在这里”之后的紫色方块每秒闪烁一次。 （如果您打开终端，则类似于光标）Here is a screenshot of what it looks like right now in a browser

.intro-container {
     margin: 0 auto;
     margin-top: 20vh;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
}

.intro-title::before {
      content: ">\A0"
}

.intro-container .intro-title {
}

.blinking {
     width: 50px;
     height: 100px;
     background-color: rgba(116,127,224,.65);
     animation-name: blob;
     animation-duration: 1s;
     animation-iteration-count: infinite;
}

@keyframes blinking {
    50% {
        background-color: transparent
    }
}

<div class="intro-container">
    <div class="intro-title">
        MY NAME HERE <div class="blinking"></div>
    </div>
</div>

Answer 1

尝试一下：

.blinking {
    width: 50px;
    height: 100px;
    background-color: rgba(116,127,224,.65);
    -webkit-animation: blinking 2s infinite;
    animation: blinking 2s infinite;
}

@keyframes blinking {
    0% {
        background-color: transparent;
    }
    49% {
        background-color: transparent
    }
    50% {
        background-color: rgba(116,127,224,.65);
    }
}

Answer 2

我认为问题在于您的animation-name未设置为正确的值。将其更改为blinking（关键帧的名称）而不是blob，以便它使用您设置的动画。