CSS小技巧 如何創建文字呼吸效果並循環呈現的動畫
要創建一個文字呼吸效果並循環呈現的動畫，您可以使用CSS關鍵幀動畫。這是相當有趣的代碼，因為呼吸效果可以為網頁帶來一些互動性和引人注目的效果。
以下是一個示例代碼，演示如何實現這個效果：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字呼吸效果</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="breathing-text">
<p>Your Text</p>
</div>
</body>
</html>CSS（styles.css）：
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.breathing-text p {
font-size: 24px; /* 文字大小 */
animation: breathingAnimation 3s ease-in-out infinite; /* 呼吸效果動畫 */
}
@keyframes breathingAnimation {
0% {
opacity: 0.7; /* 初始透明度 */
transform: scale(1);
}
50% {
opacity: 1; /* 中間透明度 */
transform: scale(1.1);
}
100% {
opacity: 0.7; /* 再次變為初始透明度 */
transform: scale(1);
}
}在這個示例中：
我們創建了一個包含文本的元素，並將其放置在一個名為breathing-text的容器內。
使用CSS樣式，我們設置了文本的初始樣式，包括字體大小和動畫屬性。
我們定義了關鍵幀動畫@keyframes breathingAnimation，以在動畫的不同階段設置不同的透明度和文本大小，從而實現呼吸效果。
動畫具有3s的持續時間，ease-in-out的時間函數，並使用infinite選項來實現無限循環。
您可以根據需要調整文本的樣式、動畫持續時間以及變換的比例來獲得所需的效果。
假設，要在原本五彩文字效果，實現文字呼吸效果，如何？ 以下原本代碼：
/* 五彩文字 */
.section1 {
color: transparent;
background: conic-gradient(
#FF5733 0 12%,
#000000 12% 33%,
#FFD133 33% 55%,
#3399FF 55% 70%,
#FF5733 70% 87%,
#FFFFFF 87% 100%);
background-size: 50%;
background-clip: text;
-webkit-background-clip: text;
animation: expand-rev 8s ease-in-out infinite;
}
@keyframes expand-rev {
0%, 100% {
background-position: left top;
}
25%{
background-position: right bottom;
}
50% {
background-position: left bottom;
}
75% {
background-position: right top;
}
}要在現有的代碼中實現文字呼吸效果，您可以將@keyframes breathingAnimation 添加到您的 .section1 樣式中，並將所需的透明度和縮放效果添加到動畫的關鍵幀中。以下是修改後的示例代碼：
.section1 {
color: transparent;
background: conic-gradient(
#FF5733 0 12%,
#000000 12% 33%,
#FFD133 33% 55%,
#3399FF 55% 70%,
#FF5733 70% 87%,
#FFFFFF 87% 100%);
background-size: 50%;
background-clip: text;
-webkit-background-clip: text;
animation: expand-rev 8s ease-in-out infinite, breathingAnimation 3s ease-in-out infinite; /* 添加呼吸效果動畫 */
}
@keyframes expand-rev {
0%, 100% {
background-position: left top;
}
25% {
background-position: right bottom;
}
50% {
background-position: left bottom;
}
75% {
background-position: right top;
}
}
@keyframes breathingAnimation {
0% {
opacity: 0.7; /* 初始透明度 */
transform: scale(1);
}
50% {
opacity: 1; /* 中間透明度 */
transform: scale(1.1);
}
100% {
opacity: 0.7; /* 再次變為初始透明度 */
transform: scale(1);
}
}在這個示例中，我們將breathingAnimation 添加到 .section1 的 animation 屬性中，以實現文字呼吸效果。同時，我們保留了之前的 expand-rev 動畫。
請注意，由於 background-clip: text; 和 opacity 動畫會在同一個元素上運行，可能會對彼此產生影響，導致呼吸動畫看起來不如預期。您可能需要根據您的需求微調動畫參數。
