資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 CSS 建立蠟燭動畫效果？
網頁動畫可以在各種網頁上看到。它們可以是訪客滾動瀏覽網頁時出現的微小網頁動畫，以吸引人們注意某個方面；也可以是演示產品的動畫；或者是一段展示某些內容的促銷網頁動畫，以有趣且引人入勝的方式進行展示。
在過去的 20 年裡，現代線上動畫技術取得了顯著進步——效能、可用頻寬和渲染質量都有所提高。不過，設計人員應謹慎使用，並且只有在動畫能實質性地改善使用者體驗時才將其整合到網站中。
網頁動畫可以用來吸引觀眾的注意力，讓他們保持更長時間的興趣，並更有效地傳達資訊。與靜態網頁不同，它可以吸引並保持人們更長時間的注意力。網頁動畫應該流暢、有意義且自然，以支援使用者體驗。與靜態網頁相比，它可以吸引並保持觀眾更長時間的注意力，並且能夠更清晰、更有效地傳達資訊。
在本文中，我們將使用純 CSS 建立一個蠟燭動畫效果。在這裡，我們將使用 CSS 動畫和其他一些屬性來建立蠟燭火焰的閃爍和發光效果。
蠟燭動畫
我們使用了 CSS 的以下屬性來建立此效果。
:before 和 :after 偽類 - 用於在所選元素內容之前或之後新增內容。偽類用於為元素的指定部分設定樣式。
CSS 動畫 - CSS 的 animation 屬性允許我們在特定時間間隔內更改元素的各種樣式屬性，從而使其產生動畫效果。
@keyframes - 用於精確指定在給定時間段內動畫期間發生的情況。這是透過宣告動畫期間某些特定“幀”的 CSS 屬性來完成的，百分比從 0%（動畫開始）到 100%（動畫結束）。
滾動行為 - 當用戶單擊可滾動框內的連結時，scrollbehavior 屬性指示滾動位置是應該平滑過渡還是直接跳轉。
背景 - 使開發人員能夠為元素新增背景效果。
盒子陰影 - 使開發人員能夠為元素新增陰影。
圓角 - 用於定義元素的圓角半徑。
變換 - 此屬性用於為元素新增 2D 或 3D 變換。它允許你旋轉、縮放、平移、移動、傾斜等元素。
Z 索引 – 用於設定定位元素的 z 順序。
不透明度 - 用於指定元素的透明度或不透明度。
過濾器 - filter 屬性使開發人員能夠為元素建立視覺效果（如對比度、模糊和飽和度）。
語法
filter: none | saturate() | blur() | contrast() | drop-shadow()| hue-rotate() | invert() | opacity()| grayscale() | sepia() | url()| brightness();
操作步驟
建立一個容器 div 類。
在容器類中，為蠟燭建立另一個類。
在其中，我們將建立 4 個類來建立燈芯、火焰、閃爍效果和火焰的光暈。
使用 :before 和 :after 偽類建立火焰和蠟燭。
使用 CSS 動畫為蠟燭提供發光效果。
示例
以下示例演示瞭如何建立蠟燭動畫效果。
<!DOCTYPE html>
<html>
<head>
<title> Candle Animation </title>
<style>
html { font-size: 11px;}
body { background: black;}
.center {
width: 100px;
margin: 2px auto 2px;
}
.stand {
position: relative;
margin: 11rem auto 0;
width: 130px;
height: 400px;
}
.wax {
bottom: 0;
top: 0;
left: 47%;
width: 180px;
height: 270px;
border-radius: 150px / 40px;
box-shadow: inset 10px -40px 20px 10px rgba(0, 0.3, 0.7, 0.3), inset -50px 0 60px 10px rgba(0, 1.0, 2.5, 0.7);
background: #190f02;
background: linear-gradient(#e47825, #ee8e0e, #633c73, #4c7a03 30%, #1c0960);
}
.flutter {
width: 60px;
height: 90px;
left: 53%;
top: 35rem;
bottom: 100%;
position: absolute;
transform: translate(-40%);
border-radius: 50%;
background: #ff6100;
filter: blur(40px);
animation: flutter 0.2s infinite;
}
@keyframes flutter {
40% {opacity: 0.6;}
}
.candlewick {
width: 10px;
height: 46px;
position: absolute;
top: 45rem;
left: 55%;
z-index: 1;
border-radius: 30% 30% 10% 5%;
transform: translate(-50%);
background: #131312;
background: linear-gradient(#d6894a, #4b532c, #131312, brown, #e8cb31 70%);
}
.blaze {
width: 30px;
height: 110px;
left: 55%;
top: 34rem;
position: absolute;
transform-origin: 52% 120%;
transform: translate(-40%);
border-radius: 51% 55% 22% 20%;
background: rgba(254, 254, 254, 1);
background: linear-gradient(white 70%, transparent);
animation: blaze1 5s linear infinite, blaze2 6s linear infinite;
}
@keyframes blaze2 {
0% {transform: translate(-40%) rotate(-3deg);}
50% {transform: translate(-40%) rotate(3deg);}
100% {transform: translate(-40%) rotate(-3deg);}
}
@keyframes blaze1 {
0%, 100% {height: 138px;}
50% {height: 158px;}
100% {height: 138px; }
}
.blue {
width: 30px;
height: 70px;
position: absolute;
border-radius: 51% 51% 45% 45%;
left: 55%;
top: 42rem;
transform: translate(-40%);
background: rgba(1, 123, 253, .6);
box-shadow: 1px -30px 40px 1px #dc8a0c, 1px 40px 50px 1px #dc8a0c, inset 4px 1px 5px 1px rgba(1, 123, 253, .7), inset -2px 1px 3px 1px rgba(1, 123, 253, .7);
}
</style>
</head>
<body>
<section class= "center">
<p class= "stand">
<p class= "wax">
<p class= "flutter"> </p>
<p class= "candlewick"> </p>
<p class= "blue"> </p>
<p class= "blaze"> </p>
</p>
</p>
</section>
</body>
</html>
結論
在本文中，我們瞭解瞭如何僅使用 HTML 和 CSS 建立簡單的燃燒蠟燭動畫。
618 次瀏覽
