微光效果是一種動畫效果，很多網站都在加載指示器中添加了微光效果。它是網頁或 HTML 元素中運動的錯覺。
我們可以使用各種 CSS 屬性（例如線性漸變、關鍵幀、動畫、背景位置、變換等）創建閃爍效果。基本上，閃爍效果添加了交替的明暗移動線。
在這里，我們將學習使用 CSS 創建微光效果。
語法
用戶可以按照以下語法使用 CSS 創建微光效果。
.shimmer-div {
background: linear-gradient
animation: shimmer 2s infinite linear;
}
@keyframes shimmer {
from {
transform: translateX(percentage);
}
to {
transform: translateX(percentage);
}
}
登錄后復制
在上面的語法中，我們在 div 元素中添加了線性漸變作為背景，并添加了使用微光關鍵幀的動畫。
我們在微光關鍵幀中從左向右移動 div 以創建微光效果。
示例
在下面的示例中，我們有一個容器 div 作為父 div。在父 div 元素內，我們添加了多個 box 元素和帶有“shimmer”類名的 div。此外，我們還在 div 元素上應用了一些 CSS。
在 CSS 中，我們將背景、寬度和微光關鍵幀中的線性漸變設置為微光 div 元素的動畫。我們使用微光關鍵幀中的 CSS 變換屬性將微光 div 元素從 – 230% 移動到 230%。
在輸出中，用戶可以觀察到父 div 元素上的移動線條，這稱為閃爍效果。
<html>
<head>
<style>
.container {
background: grey;
display: flex;
width: 600px;
position: relative;
height: 100px;
box-sizing: border-box;
border-radius: 10px;
}
.box {
height: 90px;
width: 90px;
background: #ddd;
margin: 5px 20px;
border-radius: 8px;
}
.shimmer-div {
width: 30%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(120deg,
rgba(255, 255, 0, 0.2) 30%,
rgba(255, 255, 0, 0.2) 50%,
rgba(255, 0, 255, 0.2) 80%);
animation: shimmer 2s infinite linear;
}
@keyframes shimmer {
from {transform: translateX(-230%);}
to {transform: translateX(230%);}
}
</style>
</head>
<body>
<h2>Adding the <i> Shimmer Effect </i> to the HTML element using CSS</h2>
<div class = "container">
<div class = "box"> </div>
<div class = "box"> </div>
<div class = "box"> </div>
<div class = "box"> </div>
<div class = "box"> </div>
<div class = "shimmer-div"> </div>
</div>
</body>
</html>
登錄后復制
示例
在下面的示例中，我們在圖像 div 元素上添加了閃爍效果。在這里，我們使用了“mask”CSS 屬性而不是“background”CSS 屬性。我們添加了線性漸變作為“-webkit-mask”CSS 屬性的值。
在微光關鍵幀中，我們使用左側的“webkit-maskposition”設置遮罩的位置。在輸出中，用戶可以觀察圖像上明暗線條交替的閃爍效果。
<html>
<head>
<style>
.shimmer-effect {
color: grey;
display: inline-block;
/* adding gradients */
-webkit-mask: linear-gradient(120deg, #000 25%, #0005, #000 75%) right/250% 100%;
/* shimmer effect animation */
animation: shimmer 2.5s infinite;
background-repeat: no-repeat;
width: 500px;
}
@keyframes shimmer {
100% {
/* setting up mask position at left side */
-webkit-mask-position: left
}
}
</style>
</head>
<body>
<h2>Adding the <i> Shimmer Effect </i> to the HTML element using CSS</h2>
<img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRox9t_onikXnOMmZ-gIWcD0mYq3Z4mAeKO3NeeBWjG&s" Class = "shimmer-effect" />
</body>
</html>
登錄后復制
示例
在下面的示例中，我們在加載指示器上添加了閃爍效果。首先，我們使用 HTML 和 CSS 創建加載指示器。之后，我們使用背景 CSS 屬性將線性漸變應用到微光 div 中。
在關鍵幀中，我們還旋轉微光 div，同時沿 x 正方向移動它。在輸出中，用戶可以觀察加載指示器中的閃爍效果有多漂亮。
<html>
<head>
<style>
.loader {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border: 14px solid grey;
}
.shimmer {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 100%);
animation: shimmer 2s infinite;
transform: rotate(90deg);
}
@keyframes shimmer {
0% {transform: translateX(-50%) rotate(45deg);}
100% {transform: translateX(50%) rotate(45deg);}
}
</style>
</head>
<body>
<h2>Adding the <i> Shimmer Effect </i> to the loading indicatorx using CSS</h2>
<div class = "loader">
<div class = "shimmer"> </div>
</div>
</html>
登錄后復制
用戶學會了使用 CSS 向網頁添加閃爍效果。在第一個示例中，我們向 div 元素添加了閃爍效果。在第二個示例中，我們使用“mask”CSS 屬性在圖像元素上添加閃爍效果。在上一個示例中，我們在加載指示器中添加了閃爍效果。
以上就是使用 CSS 實現微光效果的詳細內容，更多請關注www.92cms.cn其它相關文章！
