极客笔记使用CSS创建闪烁效果
闪烁效果是一种动画效果，许多网站在加载指示器中添加了闪烁效果。它是网页或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元素中添加了线性渐变作为背景，并添加了使用shimmer关键帧的动画。
我们在shimmer关键帧中将div从左到右移动，以创建闪光效果。
示例1
在下面的示例中，我们有一个父级div作为容器div。在父级div元素内部，我们添加了多个box元素和带有’shimmer’类名的div。此外，我们还在div元素上应用了一些CSS样式。
在CSS中，我们在背景、宽度和shimmer关键帧中设置了线性渐变作为shimmer div元素的动画。我们使用shimmer关键帧中的transform CSS属性将shimmer div元素从-230%移动到230%。
在输出中，用户可以观察到父div元素上的移动线条，这被称为shimmer效果。
<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>
示例2
在下面的示例中，我们在图像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>
示例3
在下面的示例中，我们在加载指示器上添加了闪光效果。首先，我们使用HTML和CSS创建了加载指示器。然后，我们使用background 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属性将闪烁效果添加到了图片元素上。在最后一个示例中，我们在加载指示器中添加了闪烁效果。