实现原理
通过CSS的伪元素(::after)创建一个覆盖层，从右侧开始覆盖元素宽度的50%，从而实现文字一半被隐藏的效果。
HTML代码：
<div class="text-effect">HELLO</div>
CSS代码：
.text-effect {
position: relative;
display: inline-block;
font-size: 3em;
font-weight: bold;
color: #3498db;
overflow: hidden;
width: 50%;
}
.text-effect::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: white;
z-index: 1;
}