CSS——文字闪烁效果

懒羊羊大王呀

已于 2024-10-03 01:04:42 修改

阅读量1.9k

点赞数 44

分类专栏： CSS-效果文章标签： css 前端

于 2024-10-02 23:33:51 首次发布

本文链接：https://blog.csdn.net/m0_73777400/article/details/142686362

版权

CSS-效果专栏收录该内容

9 篇文章 1 订阅

订阅专栏

CSS——文字闪烁效果

今天来完成一个文字闪烁的动态效果，具体呈现效果如下：

文字闪烁动态效果

实现步骤

基础的样式

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字闪烁效果</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: hsl(230, 50%, 15%);
    }

    h1 {
      font-size: 3rem;
      letter-spacing: 15px;
      text-transform: uppercase;
      text-align: center;
      line-height: 1em;
      color: hsl(190, 80%, 50%);
    }
  </style>
</head>

<body>
  <h1 contenteditable="true">hello world!</h1>
</body>

</html>

效果如下：
在这里插入图片描述

设置可编辑效果

每个HTML元素都有一个可以设置的属性：contenteditable，这个属性是 Attribute即标签属性，而不是 Property 即样式属性。

<h1 contenteditable="true">hello world!</h1>

这样点击元素就会出现文字的编辑效果。
在这里插入图片描述

但是可以看到外侧有“边框”的效果，但是这并不是真正的边框。
我们在调试工具中设置：
在这里插入图片描述

我们在调试工具中看到，<h1>元素并没有边框，而是outline属性在起作用：
在这里插入图片描述

设置：

h1 {
	outline: none
}

这样就会消除“边框”效果。

设置倒影

-webkit-box-reflect: below 10px linear-gradient(transparent, #0005);

这里 box-reflect 属性并不适用所有的浏览器，我们这里装个13使用就好了。

添加动画

这一步主要是设置文本的颜色以及文字阴影的变化。这里设置多层阴影达到自然晕开的效果。

    @keyframes animate {

      0%,
      30%,
      70% {
        color: hsl(190, 80%, 50%);
        text-shadow: none;
      }

      20%,
      40%,
      80%,
      100% {
        color: hsl(0, 0%, 100%);
        text-shadow: 0 0 5px hsl(190, 80%, 50%),
          0 0 10px hsl(190, 80%, 50%),
          0 0 20px hsl(190, 80%, 50%),
          0 0 40px hsl(190, 80%, 50%);
      }
    }

结语

创作不易，谢谢支持；如有错误，恳请指出。希望与大家共同进步。

源码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字闪烁效果</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: hsl(230, 50%, 15%);
    }

    h1 {
      font-size: 3rem;
      letter-spacing: 15px;
      text-transform: uppercase;
      text-align: center;
      line-height: 1em;
      color: hsl(190, 80%, 50%);
      outline: none;
      
      -webkit-box-reflect: below 10px linear-gradient(transparent, #0005);
      animation: animate 5s linear alternate infinite;

    }

    @keyframes animate {
      0%,
      30%,
      70% {
        color: hsl(190, 80%, 50%);
        text-shadow: none;
      }
      20%,
      40%,
      80%,
      100% {
        color: hsl(0, 0%, 100%);
        text-shadow: 0 0 5px hsl(190, 80%, 50%),
          0 0 10px hsl(190, 80%, 50%),
          0 0 20px hsl(190, 80%, 50%),
          0 0 40px hsl(190, 80%, 50%);
      }
    }
  </style>
</head>

<body>
  <h1 contenteditable="true">hello world!</h1>
</body>

</html>