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

Home

Web Front-end

CSS Tutorial

Use CSS to achieve a shimmer effect

王林

Sep 11, 2023 pm 05:49 PM

使用 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);
   }
}

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 id="Adding-the-i-Shimmer-Effect-i-to-the-HTML-element-using-CSS">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>

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 id="Adding-the-i-Shimmer-Effect-i-to-the-HTML-element-using-CSS">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" / alt="Use CSS to achieve a shimmer effect" >
</body>
</html>

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 id="Adding-the-i-Shimmer-Effect-i-to-the-loading-indicatorx-using-CSS">Adding the <i> Shimmer Effect </i> to the loading indicatorx using CSS</h2>
   <div class = "loader">
      <div class = "shimmer"> </div>
   </div>
</html>

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!

Statement

This article is reproduced at:tutorialspoint. If there is any infringement, please contact admin@php.cn delete

A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

Improving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

Making width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

Position Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties