创建 HTML
- 将文本放在 <p> 标签中，该标签定义了一段文本。
<p>像钻石一样闪耀。</p>
使用文本效果总是一个好主意，因为它们使对访问者有吸引力和有趣。
如果我们想为文本学习一种新效果，请阅读我们的代码片段并创建闪亮的文本动画效果。
现在，让我们一起潜入并创建一个。
添加 CSS
- 将 <body> 元素的显示设置为“flex”，添加边距和填充属性。
然后，将 justify-content 和 align-items 属性都设置为“center”以将项目放置在容器的中心，并相应地定义 flex 项目的默认对齐方式。
添加背景颜色属性。
- 借助设置为其“相对”值的位置属性来定位文本。
指定字体大小和字体系列以及字母间距属性。
添加背景属性。
要创建线性渐变，我们需要定义至少两个色标。
- 将animation属性设置为“infinite”值，让动画无限播放。
- 使用 text-fill-color 属性指定文本字符的填充颜色。
- 在@keyframes 的帮助下使动画工作，这有助于指定动画期间特定时刻应该发生的事情。
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000000;
}
p {
position: relative;
font-family: Impact, sans-serif;
font-size: 45px;
letter-spacing: 2px;
background: linear-gradient(90deg, #90EE90, #fff, #000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 5s infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
}
@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}
现在让我们尝试一些例子。
创建持续 5 秒的闪亮文字动画效果示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000000;
}
p {
position: relative;
font-family: Impact, sans-serif;
font-size: 45px;
letter-spacing: 2px;
background: linear-gradient(90deg, #90EE90, #fff, #000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 5s infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
}
@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}
</style>
</head>
<body>
<p>像钻石一样闪耀。</p>
</body>
</html>
我们可以根据需要在 background 属性的帮助下更改文本的颜色，但不要更改程度，因为它负责闪亮效果。
创建持续 3 秒的闪亮文字动画效果示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000000;
}
p {
position: relative;
font-family: Geneva, sans-serif;
font-size: 60px;
text-transform: uppercase;
letter-spacing: 2px;
background: linear-gradient(90deg, #DC143C, #fff, #000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 3s infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
}
@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}
</style>
</head>
<body>
<p>像钻石一样闪耀。</p>
</body>
</html>
日期：2020-06-02 22:15:02 来源：oir作者：oir