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>
相关推荐
王哲晓8 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_41111 分钟前
无网络安装ionic和运行
前端·npm
理想不理想v13 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云23 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058725 分钟前
web端手机录音
前端
齐 飞31 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹1 小时前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
GIS程序媛—椰子2 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试