資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用CSS建立發光文字？
要使用CSS建立發光文字，請使用`animation`屬性。對於動畫，我們使用`@keyframes`。`@keyframes`是一個規則，您需要在其中指定CSS樣式。將動畫繫結到元素才能使其成功工作。
`animation-name`屬性用於設定`@keyframes`動畫的名稱。動畫的持續時間使用`animation-duration`屬性設定。同樣，我們還有以下屬性允許在網頁上進行動畫：
animation
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
但是，在這個例子中，我們使用了簡寫`animation`屬性來建立發光文字。
我們設定了以下內容來形成發光文字：
animation: glowing 1s ease-in-out infinite alternate;
緩慢開始和結束的動畫
對於發光文字，`animation-timing-function`使用上述簡寫屬性設定，該屬性指定緩慢開始和結束的動畫：
ease-in-out
無限動畫
`animation-iteration-count`屬性使用上述簡寫屬性設定，使動畫無限期地持續，即永遠持續：
infinite
動畫方向
`animation-direction`屬性用於設定動畫是向前播放還是向後播放。備選值建議使用交替迴圈的動畫：
alternate
`@keyframes`規則
上面的動畫名稱是`glowing`，即`@keyframes`規則：
@-webkit-keyframes glowing {
}
文字陰影
為了在動畫規則中獲得有吸引力的外觀，我們使用了陰影樣式，即`text-shadow`屬性。`from`和`to`關鍵字在下面的示例中用於設定開始和結束：
@-webkit-keyframes glowing{
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #4f00b6, 0 0 40px #17057c, 0 0 50px #29c2ff, 0 0 60px #96fbff, 0 0 70px #1f0352;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #2b4ebe, 0 0 40px #4276e6, 0 0 50px #4644cf, 0 0 60px #3533d1, 0 0 70px #493cbb, 0 0 80px #8beeff;
}
示例
讓我們看看這個例子：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: rgb(0, 0, 0);
font-family: cursive;
}
.glowing {
font-size: 80px;
color: #fff;
text-align: center;
-webkit-animation: glowing 1s ease-in-out infinite alternate;
-moz-animation: glowing 1s ease-in-out infinite alternate;
animation: glowing 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glowing{
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #4f00b6, 0 0 40px #17057c, 0 0 50px #29c2ff, 0 0 60px #96fbff, 0 0 70px #1f0352;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #2b4ebe, 0 0 40px #4276e6, 0 0 50px #4644cf, 0 0 60px #3533d1, 0 0 70px #493cbb, 0 0 80px #8beeff;
}
}
</style>
</head>
<body>
<h1 class="glowing">GLOWING TEXT EXAMPLE</h1>
</body>
</html>
更新於：2023年11月15日
202 次檢視
廣告