CSS实现单行文字加载效果
2025年06月04日
<h4>效果</h4>
<style>
.text-loading:after{
content: "...";
animation: text-loading 2s infinite;
}
@keyframes text-loading {
25%{
content: ".";
}
50%{
content: "..";
}
100%{
content: "...";
}
}
</style>
<p class="text-loading">折腾猫正在持续等待着一个心仪的人</p>
<h3>代码</h3>
<div class="container">
<div class="textarea-container">
<textarea id="content" name="content" rows="10" placeholder="输入文章内容..." readonly class="wenbentextarea">
<style>
.text-loading:after{
content: "...";
animation: text-loading 2s infinite;
}
@keyframes text-loading {
25%{
content: ".";
}
50%{
content: "..";
}
100%{
content: "...";
}
}
</style>
<p class="text-loading">折腾猫正在持续等待着一个心仪的人</p>
</textarea>
<button id="copyBtn" class="btn-copy">
<i class="fa fa-copy"></i> 复制内容
</button>
</div>
<div class="stats">
<div>字符数: <span id="charCount">0</span></div>
<div>单词数: <span id="wordCount">0</span></div>
<div>行数: <span id="lineCount">0</span></div>
</div>
<div id="status" class="status"></div>
</div>
<style>
.text-loading:after{
content: "...";
animation: text-loading 2s infinite;
}
@keyframes text-loading {
25%{
content: ".";
}
50%{
content: "..";
}
100%{
content: "...";
}
}
</style>
<p class="text-loading">折腾猫正在持续等待着一个心仪的人</p>
<h3>代码</h3>
<div class="container">
<div class="textarea-container">
<textarea id="content" name="content" rows="10" placeholder="输入文章内容..." readonly class="wenbentextarea">
<style>
.text-loading:after{
content: "...";
animation: text-loading 2s infinite;
}
@keyframes text-loading {
25%{
content: ".";
}
50%{
content: "..";
}
100%{
content: "...";
}
}
</style>
<p class="text-loading">折腾猫正在持续等待着一个心仪的人</p>
</textarea>
<button id="copyBtn" class="btn-copy">
<i class="fa fa-copy"></i> 复制内容
</button>
</div>
<div class="stats">
<div>字符数: <span id="charCount">0</span></div>
<div>单词数: <span id="wordCount">0</span></div>
<div>行数: <span id="lineCount">0</span></div>
</div>
<div id="status" class="status"></div>
</div>