資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用 CSS3 動畫建立閃爍效果？
使用 CSS3 動畫建立閃爍效果有很多方法。閃爍效果通常用於吸引網頁上特定元素的注意力，例如警告資訊、按鈕或文字。CSS3 動畫使您可以輕鬆地使用簡潔且可重用的程式碼來實現此類效果。
建立閃爍效果的方法
- 使用 @keyframes 和 animation 屬性
- 使用 animation 和 visibility
- 使用 animation 和 opacity
- 使用 CSS Transitions（控制有限）
使用 @keyframes 和 animation 屬性
此方法將使用@keyframes 定義閃爍效果，並使用 animation 屬性來設定它。@keyframes 規則描述瞭如何將單元的不透明度在完全可見（1）和完全隱藏（0）之間切換，以實現閃爍效果。
示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blinking Effect</title>
<style>
.blink {
color: red;
font-size: 24px;
font-weight: bold;
animation: blink-animation 1s steps(1, start) infinite;
}
@keyframes blink-animation {
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="blink">Blinking Text</div>
</body>
</html>
輸出
使用 animation 和 visibility
此方法切換visibility 屬性，而不是 opacity。visibility 屬性將元素從檢視中移除，但仍在佈局中佔據空間。
示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blinking Effect</title>
<style>
.blink {
color: blue;
font-weight: 1000;
font-size: 40px;
animation: visibility-animation 0.01s infinite;
}
@keyframes visibility-animation {
50% {
visibility: hidden;
}
}
</style>
</head>
<body>
<div class="blink">Flashing Visibility</div>
</body>
</html>
輸出
使用 animation 和 opacity
另一種使用漸進淡入淡出的@keyframes 模式。opacity 會平滑過渡，而不是在值之間突然切換。
示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blinking Effect</title>
<style>
.blink {
font-size: 40px;
color: green;
animation: smooth-blink 2s infinite;
}
@keyframes smooth-blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.1;
}
}
</style>
</head>
<body>
<div class="blink">Flashing Visibility</div>
</body>
</html>
輸出
使用 CSS Transitions（控制有限）
這是一種簡單的方法，靈活性較低，因為transitions 是一次性效果。Transitions 需要使用 JavaScript 或懸停狀態來觸發效果。
示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blinking Effect</title>
style>
.blink {
font-size: 40px;
color: purple;
transition: opacity 0.5s ease-in-out;
}
.blink:hover {
opacity: 0;
}
</style>
</head>
<body>
<div class="blink">Hover to Blink</div>
</body>
</html>
輸出
更新於：2024-11-22
4 次瀏覽
廣告