Use CSS to achieve a shimmer effect-CSS Tutorial-php.cn

Use CSS to achieve a shimmer effect

王林

Release： 2023-09-11 17:49:02

forward

1081 people have browsed it

使用 CSS 实现微光效果

The shimmer effect is an animated effect that many websites add to their loading indicators. It is the illusion of motion within a web page or HTML element.

We can create a flickering effect using various CSS properties such as linear gradients, keyframes, animations, background positions, transforms, etc. Basically, the shimmer effect adds alternating moving lines of light and dark.

Here we will learn to create a shimmer effect using CSS.

grammar

Users can create shimmer effects using CSS according to the following syntax.

.shimmer-div {
   background: linear-gradient
   animation: shimmer 2s infinite linear;
}
@keyframes shimmer {
   from {
      transform: translateX(percentage);
   }
   to {
      transform: translateX(percentage);
   }
}

Copy after login

In the above syntax, we added a linear gradient as background in the div element and added animation using shimmer keyframes.

We move the div from left to right in the shimmer keyframe to create the shimmer effect.

Example

In the example below, we have a container div as the parent div. Inside the parent div element, we added multiple box elements and divs with the "shimmer" class name. Additionally, we applied some CSS on the div element.

In CSS, we animate the linear gradient in the background, width, and shimmer keyframes for the shimmer div element. We use the CSS transform property in the shimmer keyframe to move the shimmer div element from - 230% to 230%.

In the output, the user can observe moving lines on the parent div element, which is called the flicker effect.

<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>

Copy after login

Example

In the example below, we add a flicker effect on an image div element. Here, we have used the “mask” CSS property instead of the “background” CSS property. We added a linear gradient as the value of the “-webkit-mask” CSS property.

In the shimmer keyframe, we use the "webkit-maskposition" on the left to set the position of the mask. In the output, users can observe the flickering effect of alternating light and dark lines on the image.

<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>

Copy after login

Example

In the example below, we have added a blinking effect to the loading indicator. First, we create a loading indicator using HTML and CSS. After that, we apply the linear gradient to the shimmer div using the background CSS property.

In the keyframe, we also rotate the shimmer div while moving it in the positive x direction. In the output, the user can observe how beautiful the flashing effect is in the loading indicator.

<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>

Copy after login

Users learned to use CSS to add a flicker effect to web pages. In the first example, we added a blink effect to a div element. In the second example, we use the "mask" CSS property to add a flicker effect on an image element. In the previous example, we added a blinking effect to the loading indicator.

The above is the detailed content of Use CSS to achieve a shimmer effect. For more information, please follow other related articles on the PHP Chinese website!