霓虹灯闪烁效果

凡小多

于 2022-08-30 16:52:58 发布

阅读量175

点赞数

分类专栏：动画效果 HTML+CSS 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/wgh4318/article/details/126607902

版权

HTML+CSS 同时被 2 个专栏收录

53 篇文章 1 订阅

订阅专栏

动画效果

5 篇文章 0 订阅

订阅专栏

效果一

在这里插入图片描述

<div class="neon">The neon lights</div>

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

@import url(https://fonts.googleapis.com/css?family=Pacifico);

.neon {
  color: #cce7f8;
  font-size: 42px;
  font-family: 'Pacifico', cursive;
  text-transform: uppercase;
  animation: shining 0.1s alternate infinite;
  user-select: none;
}

@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);
  }
}