CSS——文字闪烁效果

news/2024/12/21 20:21:35/

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>css">* {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属性在起作用：
在这里插入图片描述

设置：

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

结语

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

源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字闪烁效果</title><style>css">* {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>