집 > 기사 > 웹 프론트엔드 > CSS 애니메이션 가이드: 깜박이는 효과를 만드는 방법을 단계별로 안내합니다.

CSS 애니메이션 가이드: 깜박이는 효과를 만드는 방법을 단계별로 안내합니다.

王林원래의: 2023-10-20 15:24:301578검색

CSS 애니메이션 가이드: 깜박임 효과를 만드는 방법을 단계별로 가르쳐줍니다.

깜박임 효과는 일반적인 CSS 애니메이션 효과로, 간단한 코드 구현을 통해 생생하고 독특한 효과를 가져올 수 있습니다. 이 문서에서는 CSS를 사용하여 윙크 효과를 만드는 방법에 대한 단계별 가이드와 구체적인 코드 예제를 제공합니다.

HTML 구조 만들기

먼저 깜박이는 효과를 표시하기 위한 HTML 구조를 만들어야 합니다. 코드는 다음과 같습니다.

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

위 코드에서는 .eye-container를 사용하여 눈 컨테이너를 래핑했습니다. 그런 다음 컨테이너 내부에 위쪽 눈꺼풀과 동공을 포함하여 눈의 모양을 나타내는 .eye를 생성했습니다. .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

다음으로 눈 요소에 몇 가지 기본 스타일을 추가하려면 style.css 파일에서 기본 스타일을 설정해야 합니다. 코드는 다음과 같습니다.

위 코드에서는 눈 컨테이너 .eye-container의 너비와 높이를 설정하고 위치를 상대 위치로 지정했습니다. 그런 다음 눈 요소 .eye의 너비와 높이뿐만 아니라 배경색과 둥근 모서리 스타일도 설정합니다. 동시에 위쪽 눈꺼풀 .eyelid 및 동공 .pupil에 대한 너비, 높이, 배경색 및 전환 효과도 설정합니다.

애니메이션 효과 추가

위 코드에서는 blink라는 키프레임 애니메이션을 정의합니다. 애니메이션의 0%에서 눈의 위쪽 눈꺼풀은 100%로 동일하게 유지되고 transform: scaleY(0.1)를 통해 위쪽 눈꺼풀이 0.1배로 줄어듭니다.
동시에 .eye:hover .eyelid와 .eye:hover .pupil에 이 애니메이션을 적용했습니다. 마우스를 눈 요소 위로 가져가면 애니메이션 효과가 위쪽 눈꺼풀과 눈동자에 적용됩니다. 애니메이션 이름, 지속 시간, 지연 시간 및 루프 방법은 animation 속성을 통해 지정됩니다.
깜박임 효과 완성

🎜🎜마지막으로 사용자에게 효과를 선사합니다. 브라우저에서 HTML 파일을 열면 깜박이는 효과가 있는 눈을 볼 수 있습니다. 마우스를 눈 위로 가져가면 눈의 위쪽 눈꺼풀과 동공이 계속해서 열리고 닫혀 깜박이는 효과가 나타납니다. 🎜🎜이 간단한 CSS 애니메이션 가이드를 통해 깜박이는 효과를 만드는 방법을 단계별로 알려드립니다. 이 가이드가 귀하에게 도움이 되기를 바라며 귀하의 웹 디자인에 독특하고 흥미로운 CSS 애니메이션 효과를 적용할 수 있기를 바랍니다. 🎜🎜참고 자료: 🎜🎜🎜[MDN 웹 문서: CSS 애니메이션](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations)🎜🎜[W3School: CSS3 애니메이션](https: / /www.w3school.com.cn/css3/css3_animation.asp)🎜🎜[CSS3 애니메이션 학습 노트](https://www.cnblogs.com/zxj159/p/6932713.html)🎜🎜

위 내용은 CSS 애니메이션 가이드: 깜박이는 효과를 만드는 방법을 단계별로 안내합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css css3 html 循环 transform animation https

성명：

이전 기사：CSS 레이아웃 속성 최적화 팁: 고정 및 Flexbox 위치 지정다음 기사：CSS 레이아웃 속성 최적화 팁: 고정 및 Flexbox 위치 지정