[css] 用css3实现文字发光的效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>霓虹文本</title>
</head>
<style>
  @import url(https://fonts.googleapis.com/css?family=Pacifico);

  body {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: black;
  }

  .neon {
    color: #cce7f8;
    font-size: 2.5rem;
    font-family: 'Pacifico', cursive;
    text-transform: uppercase;
    animation: shining 0.1s alternate infinite;
  }

  @keyframes shining {
    from {
      text-shadow: 0 0 6px rgba(182, 211, 207, 0.9),
        0 0 30px rgba(182, 211, 207, 0.3), 0 0 12px rgba(15, 115, 223, 0.5),
        0 0 21px rgba(15, 115, 223, 0.9), 0 0 34px rgba(15, 115, 223, 0.8),
        0 0 54px rgba(15, 115, 223, 0.9);
    }

    to {
      text-shadow: 0 0 6px rgba(182, 211, 207, 1),
        0 0 30px rgba(182, 211, 207, 0.4), 0 0 12px rgba(15, 115, 223, 0.6),
        0 0 22px rgba(15, 115, 223, 0.8), 0 0 38px rgba(15, 115, 223, 0.9),
        0 0 60px rgba(15, 115, 223, 1);
    }
  }
</style>

<body>
  <div class="neon">Good evening, and good night!</div>
</body>

</html>

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题