Gunakan CSS untuk mencapai kesan berkilauan-tutorial css-php.cn

Gunakan CSS untuk mencapai kesan berkilauan

王林

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

ke hadapan

1210 orang telah melayarinya

使用 CSS 实现微光效果

Kesan Glimmer ialah kesan animasi yang banyak tapak web menambah pada penunjuk pemuatannya. Ia adalah ilusi pergerakan dalam halaman web atau elemen HTML.

Kami boleh mencipta kesan kelipan menggunakan pelbagai sifat CSS seperti kecerunan linear, bingkai utama, animasi, kedudukan latar belakang, perubahan, dsb. Pada asasnya, kesan kilauan menambah garisan bergerak berselang-seli antara terang dan gelap.

Di sini kita akan belajar untuk mencipta kesan berkilauan menggunakan CSS.

Tatabahasa

Pengguna boleh mencipta kesan berkilauan menggunakan CSS mengikut sintaks berikut.

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

Salin selepas log masuk

Dalam sintaks di atas, kami menambahkan kecerunan linear sebagai latar belakang dalam elemen div dan menambahkan animasi menggunakan bingkai utama berkilauan.

Kami mengalihkan div dari kiri ke kanan dalam bingkai utama berkilauan untuk mencipta kesan berkilauan.

Contoh

Dalam contoh di bawah, kami mempunyai div bekas sebagai div induk. Di dalam elemen div induk, kami menambahkan berbilang elemen kotak dan div dengan nama kelas "shimmer". Selain itu, kami telah menggunakan beberapa CSS pada elemen div.

Dalam CSS, kami menganimasikan kecerunan linear dalam latar belakang, lebar dan bingkai utama berkilauan untuk elemen div berkilauan. Kami menggunakan sifat transformasi CSS dalam kerangka utama shimmer untuk mengalihkan elemen div shimmer dari - 230% kepada 230%.

Dalam output, pengguna boleh memerhatikan garisan bergerak pada elemen div induk, yang dipanggil kesan kelipan.

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

Salin selepas log masuk

Contoh

Dalam contoh di bawah, kami telah menambah kesan berkelip pada elemen div imej. Di sini, kami telah menggunakan sifat CSS "topeng" dan bukannya sifat CSS "latar belakang". Kami menambah kecerunan linear sebagai nilai sifat CSS "-webkit-mask".

Dalam rangka kekunci shimmer, kami menggunakan "webkit-maskposition" di sebelah kiri untuk menetapkan kedudukan topeng. Dalam output, pengguna boleh melihat kesan kelipan garisan terang dan gelap berselang-seli pada imej.

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

Salin selepas log masuk

Contoh

Dalam contoh di bawah, kami telah menambahkan kesan berkelip pada penunjuk pemuatan. Pertama, kami mencipta penunjuk pemuatan menggunakan HTML dan CSS. Selepas itu, kami menggunakan kecerunan linear pada div berkilauan menggunakan sifat CSS latar belakang.

Dalam kerangka utama, kami juga memutar div berkilauan sambil menggerakkannya ke arah x positif. Dalam output, pengguna boleh melihat betapa cantiknya kesan berkelip dalam penunjuk pemuatan.

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

Salin selepas log masuk

Pengguna belajar menggunakan CSS untuk menambah kesan kelipan pada halaman web. Dalam contoh pertama, kami menambah kesan berkelip pada elemen div. Dalam contoh kedua, kami menggunakan sifat CSS "topeng" untuk menambah kesan kelipan pada elemen imej. Dalam contoh sebelumnya, kami menambah kesan berkelip pada penunjuk pemuatan.

Atas ialah kandungan terperinci Gunakan CSS untuk mencapai kesan berkilauan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!