CSS流光文字效果：打造网页上的霓虹灯效果！-程序员社区

关注我们

微风软件

CSS流光效果，作为一种创新的文字动画技术，能够为网页增添一抹动态的光影，让文字内容更加引人注目。本文将向您展示如何使用CSS来实现这种独特的流光文字效果，让您的网页设计在视觉上脱颖而出，同时提供一种全新的用户体验。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
<style>
   html, body {
       width: 100%;
       height: 100%;
       background-image: radial-gradient(ellipse farthest-side at 40% 0%, #455A64 0%, #263238 60%, #1a2327 100%);
       display: flex;
   }
   p {
       position: relative;
       margin: auto;
       font-size: 5rem;
       word-spacing: 0.2em;
       display: inline-block;
       line-height: 1;
       white-space: nowrap;
       color: transparent;
       background-color: #E8A95B;
       background-clip: text;
   }
   p::after {
       content: attr(data-text);
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       z-index: 5;
       background-image: linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255, 0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);
       background-clip: text;
       background-size: 150% 100%;
       background-repeat: no-repeat;
       animation: shine 5s infinite linear;
   }
   @keyframes shine {
       0% {
           background-position: 50% 0;
       }
       100% {
           background-position: -190% 0;
       }
   }
  </style>
	</head>
	<body>
  <p data-text="微风软件">微风软件</p>
	</body>
</html>