创建 HTML
- 创建一个带有“glow”类的 <h1> 标签。
在标签中写一段文字。
<h1 class="glow">onitroad</h1>
添加 CSS
- 设置 <body> 元素的颜色，并将背景属性设置为其“线性渐变”值。
- 使用 font-size 和 color 属性设置“glow”类的样式，然后将 text-align 属性设置为其“center”值。
- 创建动画，它有五个值。
将此动画属性使用 -webkit- 和 -moz- 供应商前缀。
- 使用@keyframes 规则。
它可以以百分比 (%) 或者关键字“from”（与 0% 相同）和“to”（与 100% 相同）开头。
- 定义 text-shadow 属性的值。
第一个值是阴影的水平偏移量，第二个值是垂直偏移量。第三个是blur-radius，最终的值是文字的颜色。
主流浏览器完全支持@keyframes 规则。
但是，我们将 -webkit- 用于 Google Chrome 4.0、Safari 4.0 和 Opera 15.0。
body {
background: linear-gradient(90deg, rgba(177, 64, 200, 1) 0%, rgba(109, 9, 121, 1) 35%,
rgba(45, 1, 62, 1) 100%);
}
.glow {
font-size: 70px;
color: #ffffff;
text-align: center;
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #eeeeee, 0 0 20px #000000, 0 0 30px #000000, 0 0 40px #000000,
0 0 50px #9554b3, 0 0 60px #9554b3, 0 0 70px #9554b3;
}
to {
text-shadow: 0 0 20px #eeeeee, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6,
0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
创建具有线性渐变的发光文本的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
background: linear-gradient(90deg, rgba(177, 64, 200, 1) 0%,
rgba(109, 9, 121, 1) 35%, rgba(45, 1, 62, 1) 100%);
}
.glow {
font-size: 70px;
color: #ffffff;
text-align: center;
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #eeeeee, 0 0 20px #000000, 0 0 30px #000000, 0 0 40px #000000,
0 0 50px #9554b3, 0 0 60px #9554b3, 0 0 70px #9554b3;
}
to {
text-shadow: 0 0 20px #eeeeee, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6,
0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
</style>
</head>
<body>
<h1 class="glow">onitroad</h1>
</body>
</html>
创建具有背景颜色的发光文本的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table;
background-color: black;
}
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.glow {
color: #FB4264;
font-size: 9vw;
line-height: 9vw;
text-shadow: 0 0 3vw #F40A35;
}
.glow {
animation: glow 1.2s ease infinite;
-moz-animation: glow 1.2s ease infinite;
-webkit-animation: glow 1.2s ease infinite;
}
@keyframes glow {
0%,
100% {
text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
color: #FED128;
}
50% {
text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
color: #806914;
}
}
</style>
</head>
<body>
<div class="container">
<div class="glow">onitroad</div>
</div>
</body>
</html>
发光的文字会立即引起用户的注意。
他们可以轻松地使某人心情愉快。
我们可以选择柔和的颜色和柔和的发光元素，这会给用户带来轻松的感觉。
今天的教程将向我们展示如何仅使用 HTML 和 CSS 创建发光文本。
按照步骤操作并查看发光文本示例。
日期：2020-06-02 22:15:02 来源：oir作者：oir