发光字体

于2022-12-15 10:10:39发布
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      background-color: #222222;
    }

    a {
      font-weight: bold;
      font-size: 50px;
      color: #FF1177;
      text-decoration: none;
      -webkit-transition: all 0.5s;
    }

    a:hover {
      -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
      color: #ffffff;
    }

    @-webkit-keyframes neon1 {
      0% {
        text-shadow: 0 0 10px #fff,
          0 0 20px #fff,
          0 0 30px #fff,
          0 0 40px #FF1177,
          0 0 70px #FF1177,
          0 0 80px #FF1177,
          0 0 100px #FF1177,
          0 0 150px #FF1177;
      }

      100% {
        text-shadow: 0 0 5px #fff,
          0 0 10px #fff,
          0 0 15px #fff,
          0 0 20px #FF1177,
          0 0 35px #FF1177,
          0 0 40px #FF1177,
          0 0 50px #FF1177,
          0 0 75px #FF1177;
      }
    }
  </style>
</head>
<body>
  <a href="#">RED</a>
</body>
</html>
运行效果