使用 css 和 HTML 的 streamlabs OBS 的简单文本擦除效果

Question

每个人我都想只使用 CSS 和 HTML 获得简单的文本擦除效果，我有一个非常简单的代码。
我的目标是，当文本框缩小时文本不会调整大小，这就是我想要实现这种类型的文本擦除效果的方式。请注意我需要一个完全透明的背景，因为我想将它用作 twitch 的子警报。

是否有任何选项可以让文本保持在固定位置（右侧），并且当文本框从左到右擦除它时。

.containner{
width: 200px;
height: 150px;
background-color:green;

overflow: hidden;
position: relative;

}
.innercon{
    right: 0%;
width: 200px;
height: 50px;
background-color: pink;
animation: animaitonx;
animation-duration: 5s;
animation-iteration-count: infinite;
overflow: hidden;
position: absolute;
/*animation-delay: 10s;*/

}
@keyframes animaitonx{
    from{
        width: 200px;

    }
    to{
        width:0px;

    }
}
#copy{
    position: static;
}
.texttHolder{
     
    width:200px;
    text-align: right;
    
    color:red
}

<body onload="mainx()">
<div id="containner" class="containner">
    <div class="innercon">
        <div class="texttHolder" id="copy">
            here is your text
        </div>
        <div id="paste">
            
        </div>
    </div>


</div>


</body>

Answer 1

这些动画可能对您有所帮助：

Codepen: https://codepen.io/manaskhandelwal1/pen/MWjqowM

.

第一个：

h1#first {
  animation: textFade 5s ease infinite;
  width: fit-content;
  margin-bottom: 50px;
}

@keyframes textFade {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-110%);
    opacity: 0;
  }
}

<h1 id="first">Lorem ipsum dolor</h1>

第二个：

h1#second {
  width: fit-content;
  position: relative;
}

h1#second:before {
  content: "";
  position: absolute;
  background-color: white;
  width: 100%;
  animation: textFade2 5s ease infinite;
  height: 100%;
  box-shadow: 25px 0px 30px 10px #ffffff;
}

@keyframes textFade2 {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(0%);
  }
}

<h1 id="second">Lorem ipsum dolor</h1>

Answer 2

一个简单的遮罩效果就可以做到：

h1 {
  color: #fff;
  display: table;
  margin: 50px auto;
  font-family: sans-serif;
  font-size: 60px;
  -webkit-mask-image: linear-gradient(to right, transparent 40%, #fff 60%);
  -webkit-mask-position: right;
  -webkit-mask-size: 250% 100%;
  animation: hide 2s linear forwards;
}

h1.opposite {
  -webkit-mask-image: linear-gradient(to left, transparent 40%, #fff 60%);
  animation-direction: reverse;
}

@keyframes hide {
  to {
    -webkit-mask-position: left;
  }
}

body {
  background: linear-gradient(to right, red, green);
}

<h1>A sample text</h1>

<h1 class="opposite">A sample text</h1>

使用 css 和 HTML 的 streamlabs OBS 的简单文本擦除效果

Simple text wipe effect for streamlabs OBS using css and HTML

html

css

window-resize

这些动画可能对您有所帮助：