变色发光字 | 惊艳四座的炫彩字体设计 | HTML5和CSS3技巧

前端

2023-04-09 04:31:54

HTML5+CSS3变色发光字：为您的网站增添炫彩

在现代数字时代，网页设计已成为企业不可或缺的营销利器。为了在竞争激烈的网络环境中脱颖而出，设计师们不断探索各种创意元素，其中炫彩发光字便是近年来备受青睐的一大亮点。

什么是炫彩发光字？

炫彩发光字是一种基于HTML5和CSS3技术的文字特效，通过巧妙的投影和动画效果，让文字呈现出倒影和随机颜色的炫酷视觉效果。其不仅具有美观性，更能有效吸引用户的注意力，提升网站的视觉体验。

如何实现炫彩发光字？

实现炫彩发光字并不复杂，只需要掌握以下步骤即可：

1.准备文本内容

首先，需要准备要显示的文本内容，并在HTML代码中使用<input>元素输入文字。

<div class="text-container">
  <input type="text" id="text-input" placeholder="请输入您的文字">
</div>

2.设置基础样式

接下来，使用CSS代码设置页面背景色、字体样式、文本输入框样式等基础样式。

body {
  background-color: #000;
  font-family: sans-serif;
}

.text-container {
  width: 100%;
  text-align: center;
}

#text-input {
  width: 50%;
  padding: 10px;
  font-size: 24px;
  border: none;
  background-color: #fff;
  color: #000;
}

3.添加投影效果

投影效果是炫彩发光字的关键，通过设置多个不同颜色的投影，营造出一种立体的视觉效果。

.text {
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff0000, 0 0 70px #ff0000, 0 0 80px #ff0000, 0 0 100px #ff0000;
}

4.转换大写

为了使文字效果更加醒目，可以将其转换为大写字母。

.text {
  text-transform: uppercase;
}

5.定义自定义属性

自定义属性可以让我们方便地管理文字效果中的颜色。

:root {
  --color-1: #ff0000;
  --color-2: #ff7f00;
  --color-3: #ffff00;
  --color-4: #00ff00;
  --color-5: #00ffff;
  --color-6: #0000ff;
  --color-7: #8b00ff;
}

6.设置盒子阴影

盒子阴影与投影效果相结合，共同塑造出炫彩发光字的立体感。

.text {
  box-shadow: 0 0 10px var(--color-1), 0 0 20px var(--color-2), 0 0 30px var(--color-3), 0 0 40px var(--color-4), 0 0 50px var(--color-5), 0 0 60px var(--color-6), 0 0 70px var(--color-7);
}

7.添加动画

动画效果让炫彩发光字更加灵动。

@keyframes glow {
  0% {
    text-shadow: 0 0 10px var(--color-1), 0 0 20px var(--color-2), 0 0 30px var(--color-3), 0 0 40px var(--color-4), 0 0 50px var(--color-5), 0 0 60px var(--color-6), 0 0 70px var(--color-7);
  }
  50% {
    text-shadow: 0 0 20px var(--color-1), 0 0 30px var(--color-2), 0 0 40px var(--color-3), 0 0 50px var(--color-4), 0 0 60px var(--color-5), 0 0 70px var(--color-6), 0 0 80px var(--color-7);
  }
  100% {
    text-shadow: 0 0 10px var(--color-1), 0 0 20px var(--color-2), 0 0 30px var(--color-3), 0 0 40px var(--color-4), 0 0 50px var(--color-5), 0 0 60px var(--color-6), 0 0 70px var(--color-7);
  }
}

.text {
  animation: glow 2s infinite alternate;
}