Hello，大家好，今天为大家分享一个万有前端百日筑基系列之基于Html5+Css3实现【文本加载】功能效果，本功能效果摘自【万有前端·icode】。【万有前端·icode】不仅集成基于原生实现的各类功能效果，更有基于echarts实现的各类图表、面试算法题、组件库文档等，感兴趣的朋友可以自行访问fmill.cn/dx-ui/icode 。此外，基于Vite6+Vue3+Element-Plus2+Typescript5构建的【万有前端·效能阁(fmill.cn/dx-ui/effec… )】已正式上线，这是一款Vite6+Vue3的企业级提效解决方案，业已集成基础库、组件库、功能库、指令库等若干实用干货。【万有前端·icode】和【万有前端·效能阁】是本人自研的【万有前端】技术体系支撑平台，独家为前端小白及初、中级前端匠心打造的提效赋能平台，长期更新维护，不喜勿喷！
功能效果图（为降本增效效果图为截图静态图，实际是动态效果）：
附上源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: #000;
overflow: hidden;
display: grid;
place-items: center;
}
h1 {
position: relative;
font-size: 6vw;
color: #252839;
line-height: 1.2em;
text-transform: uppercase;
-webkit-text-stroke: 0.3vw #383d52;
display: inline-block;
}
h1:before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
color: #01fe87;
overflow: hidden;
-webkit-text-stroke: 0vw #383d52;
border-right: 4px solid #01fe87;
animation: animate 4s linear infinite;
}
@keyframes animate {
0%,
10%,
100% {
width: 0;
}
70%,
90% {
width: 100%;
}
}
</style>
</head>
<body>
<h1 data-text="正在加载中...">正在加载中...</h1>
</body>
</html>
