Panduan Animasi CSS: Ajar anda langkah demi langkah untuk mencipta kesan berkelip-tutorial css-php.cn

Panduan Animasi CSS: Ajar anda langkah demi langkah untuk mencipta kesan berkelip

王林

Lepaskan： 2023-10-20 15:24:30

asal

1584 orang telah melayarinya

Panduan Animasi CSS: Ajar anda langkah demi langkah untuk mencipta kesan berkelip

Panduan Animasi CSS: Ajar anda langkah demi langkah cara mencipta kesan berkelip

Kesan berkelip ialah kesan animasi CSS biasa, yang boleh membawa kesan yang jelas dan unik melalui pelaksanaan kod yang mudah. Artikel ini akan memberi anda panduan langkah demi langkah tentang cara menggunakan CSS untuk mencipta kesan berkelip, dengan contoh kod khusus.

Buat struktur HTML

Pertama, kita perlu mencipta struktur HTML untuk memaparkan kesan berkelip. Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>眨眼特效</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="eye-container">
      <div class="eye">
        <div class="eyelid"></div>
        <div class="pupil"></div>
      </div>
    </div>
  </body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami menggunakan .bekas mata untuk membungkus bekas mata. Kemudian, kami mencipta .eye di dalam bekas sebagai penampilan mata, termasuk kelopak mata atas dan anak mata. .eye-container来包裹眼睛的容器。然后，我们在容器内部创建了一个.eye作为眼睛的外观，同时包含了上眼皮和瞳孔。

设置基本样式

接下来，我们需要在style.css文件中设置基本样式，为眼睛元素添加一些基本样式。代码如下：

.eye-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.eye {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden;
}

.eyelid {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #000;
  transition: transform 0.2s ease-in-out;
}

.pupil {
  position: absolute;
  top: 50%;
  left: 0;
  width: 50%;
  height: 50%;
  background-color: #000;
  border-radius: 50%;
  transform: translate(25%, 25%);
  transition: transform 0.2s ease-in-out;
}

Salin selepas log masuk

在上述代码中，我们为眼睛的容器.eye-container设置了宽度和高度，并指定了它的位置为相对定位。然后，我们为眼睛元素.eye设置了宽度和高度，以及背景色和圆角样式。同时，我们也为上眼皮.eyelid和瞳孔.pupil设置了宽度、高度、背景色和过渡效果。

添加动画效果

现在，我们要为眼睛添加眨眼的动画效果。我们可以通过CSS的关键帧动画来实现这一效果。代码如下：

@keyframes blink {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.1);
  }
}

.eye:hover .eyelid {
  animation: blink 0.4s 0.1s infinite alternate;
}

.eye:hover .pupil {
  animation: blink 0.4s 0.1s infinite alternate-reverse;
}

Salin selepas log masuk

在上述代码中，我们定义了一个名为blink的关键帧动画。该动画在0%的时候，眼睛的上眼皮保持原样；在100%的时候，上眼皮通过transform: scaleY(0.1)将其缩小至0.1倍。

同时，我们在.eye:hover .eyelid和.eye:hover .pupil中应用了这个动画。当鼠标悬停在眼睛元素上时，上眼皮和瞳孔都会应用动画效果，通过animation

Seterusnya, kita perlu menetapkan gaya asas dalam fail style.css untuk menambah beberapa gaya asas pada elemen mata. Kodnya adalah seperti berikut:

Dalam kod di atas, kami menetapkan lebar dan tinggi bekas mata .bekas mata dan menentukan kedudukannya sebagai kedudukan relatif. Kemudian, kami menetapkan lebar dan ketinggian elemen mata .eye, serta warna latar belakang dan gaya sudut bulat. Pada masa yang sama, kami juga menetapkan lebar, ketinggian, warna latar belakang dan kesan peralihan untuk kelopak mata atas . kelopak mata dan murid .pupil.

Tambah kesan animasi

Dalam kod di atas, kami mentakrifkan animasi bingkai utama bernama blink. Pada 0% daripada animasi, kelopak mata atas mata kekal sama; pada 100%, kelopak mata atas dikurangkan kepada 0.1 kali melalui transform: scaleY(0.1).
Pada masa yang sama, kami menggunakan animasi ini dalam .eye:hover .eyelid dan .eye:hover .pupil. Apabila tetikus melayang di atas elemen mata, kesan animasi akan digunakan pada kelopak mata atas dan murid Nama animasi, tempoh, masa tunda dan kaedah gelung ditentukan melalui atribut animasi.
Lengkapkan kesan berkelip

🎜🎜Akhir sekali, kami mempersembahkan kesan kepada pengguna. Buka fail HTML dalam penyemak imbas anda dan anda akan melihat mata dengan kesan berkelip. Apabila tetikus diletakkan di atas mata, kelopak mata atas dan anak mata akan terus terbuka dan tertutup, menghasilkan kesan berkelip. 🎜🎜Dengan panduan animasi CSS ringkas ini, kami mengajar anda langkah demi langkah cara mencipta kesan berkelip. Saya harap panduan ini akan membantu anda dan membolehkan anda menggunakan kesan animasi CSS yang unik dan menarik dalam reka bentuk web anda. 🎜🎜Rujukan: 🎜🎜🎜[Dokumentasi Web MDN: Animasi CSS](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations)🎜🎜[W3School: CSS3 Animations](https: / /www.w3school.com.cn/css3/css3_animation.asp)🎜🎜[nota kajian Animasi CSS3](https://www.cnblogs.com/zxj159/p/6932713.html)🎜🎜

Atas ialah kandungan terperinci Panduan Animasi CSS: Ajar anda langkah demi langkah untuk mencipta kesan berkelip. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!