短视频源代码，文字加载特效的实现代码
短视频源代码，文字加载特效的实现代码
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>文字加载</title><style>/*思路是 下面一层文字, 上面一层文字, 使用动画改变上面文字的宽度 */*{margin:0;padding:0;box-sizing:border-box;}body{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#000;}h2{position:relative;font-size:14vw;text-transform:uppercase;color:#252839;-webkit-text-stroke:0.3vw #283d52;/*字体的描边*/}h2::before{content:attr(data-text);position:absolute;top:0;left:0;color:#01fe87;width:100%;height:100%;-webkit-text-stroke:0vw #383d52;border-right:1px solid #01fe87;overflow:hidden;animation:animate 6slinearinfinite;}@keyframesanimate{0%,10%,100%{width:0;}70%{width:100%;}}</style></head><body><h2 data-text='creative...'>creative...</h2></body></html>以上就是短视频源代码，文字加载特效的实现代码， 更多内容欢迎关注之后的文章