数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 CSS3 实现淡入淡出文本动画效果
淡入淡出是一种视觉效果，表示可见性之间逐渐过渡。我们可以使用 CSS3 中的 `@keyframes` 规则和 `opacity` 属性来实现淡入淡出动画。
在这篇文章中，我们有两个带有文本内容的 div 盒子。我们的任务是使用 CSS3 应用淡入淡出文本动画效果。
淡入淡出动画类型
淡入淡出动画主要有以下两种类型：
淡入文本动画
**淡入** 文本动画使文本从透明逐渐变为完全可见。我们将使用 CSS 动画和关键帧来应用淡入文本动画。
- 我们使用了两个 div，父级 div 创建了一个深蓝色矩形区域，子级 div 将具有淡入淡出动画效果。
- 我们使用了 **parent** 类来创建矩形区域，使用 CSS 的 `height` 和 `width` 属性设置其尺寸。我们还设置了容器的 `background-color` 和子元素中书写内容的文本 `color`。
- 我们使用了 **child** 类来设计子级 div，其尺寸与父级 div 相同。我们使用了 `display` 属性将其设置为 弹性盒子，并使用 CSS 的 `justify-content` 和 `align-items` 属性水平和垂直居中书写内容。
- 我们将 `opacity` 设置为 0，因此最初不会显示任何文本。然后，我们使用 `hover` 伪函数，在悬停在盒子上方时显示 **淡入** 动画。
- 我们使用了 `animation` 属性来定义一个名为 **fade** 的动画，其 `animation-duration` 为 3 秒。
- 我们使用了 `@keyframes`，它指定了从 0 到 1 的 `opacity`，从而创建了一个 **淡入** 动画。
示例
以下是一个实现上述步骤以创建 **淡入** 动画的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent {
height: 200px;
width: 200px;
background-color: #031926;
color: white;
}
.child {
height: inherit;
width: inherit;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.child:hover {
animation: fade 3s;
opacity: 1;
}
</style>
</head>
<body>
<h3>
Fading Text Animation Effect Using CSS3
</h3>
<p>
Hover over the box to see the <strong>
fade-in</strong> animation.
</p>
<div class="parent">
<div class="child">
This is a fading text.
</div>
</div>
</body>
</html>
淡出文本动画
**淡出** 文本动画使文本从完全可见逐渐变为透明。
- 要创建淡出动画，用于 **parent** 和 **child** div 的所有属性都与第一种方法相同。
- 我们只是在动画开始时使用了 **"opacity: 1"** 值来显示文本内容，然后使用 **"opacity: 0"** 来隐藏文本内容，从而创建了一个淡出动画。
示例 1
这是一个完整的示例代码，实现了上述步骤以创建 **淡出** 动画。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent {
height: 200px;
width: 200px;
background-color: #031926;
color: white;
}
.child {
height: inherit;
width: inherit;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.child:hover {
animation: fade 3s;
opacity: 0;
}
</style>
</head>
<body>
<h3>
Fading Text Animation Effect Using CSS3
</h3>
<p>
Hover over the box to see the <strong>
fade-out</strong> animation.
</p>
<div class="parent">
<div class="child">
This is a fading text.
</div>
</div>
</body>
</html>
示例 2
在此示例中，我们使用了两种动画，即 **淡入** 和 **淡出**。在 0% 到 50% 的时间内，它显示 **淡入** 动画，而在剩余时间内显示 **淡出** 动画。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent {
height: 200px;
width: 200px;
background-color: #031926;
color: white;
}
.child {
height: inherit;
width: inherit;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
}
@keyframes fade {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.child:hover {
animation: fade 3s infinite;
}
</style>
</head>
<body>
<h3>
Fading Text Animation Effect Using CSS3
</h3>
<p>
Hover over the box to see both <strong>
fade-in</strong> and <strong> fade-out
</strong> animation.
</p>
<div class="parent">
<div class="child">
This is a fading text.
</div>
</div>
</body>
</html>
结论
在本文中，我们讨论了使用 CSS3 实现淡入淡出文本动画效果。我们讨论了 **淡入** 和 **淡出** 动画。我们使用了 CSS 的 `animation` 属性以及 `@keyframes` 和 `opacity` 属性。
更新于: 2024 年 9 月 27 日
3K+ 阅读量
广告