資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 CSS 實現閃爍效果
要使用 CSS 建立閃爍效果，我們將使用 CSS 動畫 和 線性漸變 屬性。閃爍效果是一種動畫效果，在許多網頁載入網頁時使用。
在這篇文章中，我們有一個包含兩個其他子盒子的盒子的佈局，我們的任務是使用 CSS 建立閃爍效果。
建立閃爍效果的步驟
我們將遵循以下步驟使用 CSS 建立閃爍效果。
- 我們有兩個盒子包裹在一個 div 容器中。
- 容器 類使用 CSS 高度 和 寬度 屬性設定父 div 的尺寸，並使用 display 屬性將其設為 彈性盒子。我們使用 align-items 屬性垂直居中子元素。
- 我們將其 位置 設定為相對，因此其子節點將基於容器放置。我們設定了它的 背景顏色 和 圓角 以獲得彎曲的邊緣。
- 我們使用 盒子 類來設定盒子的樣式。我們設定了它們的高度、寬度、背景顏色、圓角和 邊距。
- 閃爍-div 類負責建立閃爍效果。它相對於容器定位，頂部 和 左側 邊緣與其父 div 對齊。我們使用了 “background: linear-gradient()”，它設定了一個從左到右過渡的線性漸變背景。我們對線性漸變使用了 rgba 值。
- 我們使用了 “animation: shimmer 1.7s linear infinite;” 來建立一個動畫，其 名稱 為 shimmer，具有 1.7 秒的 動畫持續時間，具有無限的 動畫迭代次數 和線性的 計時函式。
- @keyframes shimmer 規則定義了名為 shimmer 的動畫，該動畫使用 translateX 函式（transform 屬性）建立從左到右的滑動動畫，從而產生閃爍效果。
示例
這是一個完整的示例程式碼，實現了上述步驟以使用 CSS 建立閃爍效果。
<html>
<head>
<style>
.container {
background-color: rgb(203, 201, 201);
display: flex;
width: 230px;
position: relative;
height: 120px;
align-items: center;
box-sizing: border-box;
border-radius: 10px;
}
.box {
height: 90px;
width: 90px;
background-color: rgb(230, 229, 229);
margin: 5px 20px;
border-radius: 8px;
}
.shimmer-div {
width: 30%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to right,
rgba(238, 238, 238, 0) 20%,
rgba(250, 250, 250, 0.5) 50%,
rgba(238, 238, 238, 0) 80%);
animation: shimmer 1.7s linear infinite;
}
@keyframes shimmer {
from {
transform: translateX(-230%);
}
to {
transform: translateX(280%);
}
}
</style>
</head>
<body>
<h3>
Shimmer Effect using CSS
</h3>
<div class="container">
<div class="box"> </div>
<div class="box"> </div>
<div class="shimmer-div"></div>
</div>
</body>
</html>
結論
在本文中，我們瞭解瞭如何使用 CSS 建立閃爍效果。我們使用了 線性漸變、CSS 動畫 和 @keyframes 來建立閃爍效果。
更新於： 2024年9月30日
8K+ 瀏覽量
廣告