Rumah > Artikel > hujung hadapan web > Panduan Animasi CSS: Ajar anda langkah demi langkah untuk mencipta kesan berkelip
Panduan Animasi CSS: Ajar anda langkah demi langkah untuk mencipta kesan berkelip
- 王林asal
- 2023-10-20 15:24:301518semak imbas
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>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;
}在上述代码中，我们为眼睛的容器.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;
}在上述代码中，我们定义了一个名为blink的关键帧动画。该动画在0%的时候，眼睛的上眼皮保持原样；在100%的时候，上眼皮通过transform: scaleY(0.1)将其缩小至0.1倍。
同时，我们在.eye:hover .eyelid和.eye:hover .pupil中应用了这个动画。当鼠标悬停在眼睛元素上时，上眼皮和瞳孔都会应用动画效果，通过animation
- Tetapkan gaya asas
- Seterusnya, kita perlu menetapkan gaya asas dalam fail
style.cssuntuk 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
Sekarang, kita akan menambah kesan animasi berkelip pada mata. Kita boleh mencapai kesan ini melalui animasi kerangka kunci CSS. Kodnya adalah seperti berikut:- rrreee
- 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 melaluitransform: scaleY(0.1). - Pada masa yang sama, kami menggunakan animasi ini dalam
.eye:hover .eyeliddan.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 atributanimasi. - Lengkapkan kesan berkelip
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!