<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="try.css"> <title>Document</title> </head> <body> <h1 data-text="DaXiangCai">DaXiangCai</h1> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; background: #eafdff; align-items: center; justify-content: center; min-height: 100vh; flex-wrap: wrap; } h1 { position: relative; font-size: 14vw; color: #eafdff; -webkit-text-stroke: 5px green; } h1::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 0; height: 100%; color: pink; -webkit-text-stroke: 0px green; border-right: 5px solid; overflow: hidden; animation: animate 6s linear infinite; /* 文本不允许出现空格 */ } @keyframes animate { 0%,100% { width: 0; } 70%,90% { width: 100%; } }
标签:flex,填充,效果,color,text,100%,width,文本 From: https://www.cnblogs.com/daxiangcai/p/17015801.html