資料結構
網路
關係資料庫管理系統 (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+ 閱讀量
廣告