CSS——文字闪烁效果

CSS------文字闪烁效果

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

文字闪烁动态效果

实现步骤

基础的样式

html 复制代码
<!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 即样式属性。

html 复制代码
<h1 contenteditable="true">hello world!</h1>

这样点击元素就会出现文字的编辑效果。

但是可以看到外侧有"边框"的效果,但是这并不是真正的边框。

我们在调试工具中设置:

我们在调试工具中看到,<h1>元素并没有边框,而是outline属性在起作用:

设置:

css 复制代码
h1 {
	outline: none
}

这样就会消除"边框"效果。

设置倒影

css 复制代码
-webkit-box-reflect: below 10px linear-gradient(transparent, #0005);

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

添加动画

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

css 复制代码
    @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%);
      }
    }

结语

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

源码

html 复制代码
<!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>
相关推荐
y先森2 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy2 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189115 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端