线性擦除文本效果使用CSS或CSS3动画

linear wipe text effect using CSS or CSS3 animate

本文关键字：CSS CSS3 动画 擦除 文本 线性      更新时间：2023-09-26

如何使用CSS和JavaScript显示带有"线性擦除"效果的文本显示。怎么做呢?

<p>Text linear wipe </p>

检查代码片段:

p{
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: linearwipe 6s steps(60, end); 
}
@keyframes linearwipe{ 
  from { width: 0; } 
}  
<p>Text linear wipe </p>

代码运行正常:

CSS: 

.linear-wipe{
  white-space: nowrap;
  overflow: hidden; 
  animation: linearwipe 1s steps(100, end); 
  opacity: 1;
  width: 0%;
}
@keyframes linearwipe{ 
  from { width: 0;opacity: 0 } 
}
相关文章：