好看的CSS字体效果 电脑版发表于：2020/7/16 18:07 tn>效果图   tn>代码 <font style="color:#e67e22;font-weight: bold;" >index.html</font> ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <ul> <li><span>×</span><a href="#" data-text="Home">Home</a></li> <li><span>×</span><a href="#" data-text="About">About</a></li> <li><span>×</span><a href="#" data-text="Services">Services</a></li> <li><span>×</span><a href="#" data-text="Typing Menu">Typing Menu</a></li> <li><span>×</span><a href="#" data-text="Our Team">Our Team</a></li> <li><span> ×</span><a href="#" data-text="Contact Us">Contact Us</a></li> </ul> </body> </html> ``` <font style="color:#2ecc71;font-weight: bold;" >style.css</font> ```css *{ margin: 0; padding: 0; font-family: consolas; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1c234a; } ul{ position: relative; } ul li{ list-style: none; margin: 0 20px; font-size: 4em; } ul li span{ position: relative; top: -5px; left: -10px; color: transparent; } ul li:hover span{ color: red; } ul li a { position: relative; color: rgba(255,255,255,0.1); text-decoration: none; font-weight: 700; } ul li a:before { content: attr(data-text); position: absolute; top: 0; overflow-y: hidden; overflow-x: hidden; color: #1bfaad; white-space: nowrap; } ul:hover li a:before{ /* steps个字母 */ animation: animate 0.5s steps(11) forwards; } @keyframes animate{ 0%{ width: 387.063px; } 100%{ width: 0px; } } ul li:hover a:before{ /* steps个字母 */ animation: animateTwo 2s steps(11) forwards; } @keyframes animateTwo{ 0%{ width: 0; } 100%{ width: 387.063px; } } ```
