CSS 애니메이션 가이드: 비행 효과를 만드는 방법을 단계별로 가르쳐줍니다.-CSS 튜토리얼-php.cn

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

王林

풀어 주다： 2023-10-19 10:41:08

원래의

1150명이 탐색했습니다.

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

CSS 애니메이션 가이드: 날아다니는 특수 효과를 만드는 방법을 단계별로 가르쳐줍니다.

소개: CSS(Cascading Style Sheets)는 웹 디자인에서 매우 중요한 기술이며 웹 페이지의 스타일과 레이아웃을 설정하는 데 사용할 수 있습니다. . 다양한 효과 중 가장 인기가 많은 효과는 비행 효과입니다. 이 글에서는 CSS를 사용하여 비행 효과를 만드는 방법을 단계별로 설명하고 구체적인 코드 예제를 제공합니다.

1. HTML 구조 만들기

먼저 비행 효과를 수용할 수 있는 HTML 구조를 만들어야 합니다. 다음은 HTML 구조의 샘플 코드입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>飞翔特效</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <div class="bird"></div>
  </body>
</html>

로그인 후 복사

Flying 설정을 위해 <head> 태그에 styles.css라는 스타일 시트 파일을 도입했습니다. 특수효과 스타일. <head> 标签中引入了一个名为 styles.css 的样式表文件，用于设置飞翔特效的样式。

二、添加 CSS 样式

接下来，我们需要添加 CSS 样式来创建飞翔特效。在 styles.css 文件中，我们可以使用以下代码：

.bird {
  width: 100px;
  height: 100px;
  background-color: #FFD700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: fly 4s infinite;
}

@keyframes fly {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

로그인 후 복사

在上述代码中，我们首先对 .bird 类的元素设置了宽度和高度，并给它设置了背景颜色。使用 position: absolute; 将元素定位到居中位置。

我们使用 transform 属性来设置元素的位移和旋转状态。translate(-50%, -50%)将元素在水平和垂直方向都向左和向上移动50%的距离，以使其居中。

然后，我们创建了一个名为 fly 的关键帧动画。在 0% 的时候元素未发生任何变化，50% 的时候元素向右旋转了180度，100%

2. CSS 스타일 추가

다음으로 비행 효과를 만들기 위해 CSS 스타일을 추가해야 합니다. styles.css 파일에서 다음 코드를 사용할 수 있습니다.

rrreee

위 코드에서는 먼저 .bird 요소의 너비와 높이를 설정했습니다. 클래스를 선택하고 배경색을 설정합니다. 요소를 중앙에 배치하려면 position:absolute;를 사용하세요.

transform 속성을 사용하여 요소의 변위 및 회전 상태를 설정합니다. translate(-50%, -50%)요소를 수평 및 수직 모두 왼쪽 및 위쪽으로 50% 이동하여 중앙에 배치합니다.

그런 다음 fly라는 키프레임 애니메이션을 만들었습니다. 0%이면 요소가 변경되지 않습니다. 50%이면 요소가 오른쪽으로 180도 회전합니다. 오른쪽으로 180도 회전하여 초기 상태로 돌아갑니다. 이 애니메이션 효과는 반복되며 4초 동안 지속됩니다.

3. 결과 시연🎜🎜위 작업을 완료한 후 브라우저에서 HTML 파일을 열고 새가 날아다니는 특수 효과를 볼 수 있습니다. 🎜🎜요약: 🎜🎜이 기사를 통해 CSS를 사용하여 비행 효과를 만드는 방법을 배웠습니다. 먼저 특수 효과를 표시하기 위해 HTML 구조를 만든 다음 CSS를 사용하여 요소의 위치와 애니메이션을 포함한 관련 스타일을 설정했습니다. 마지막으로 브라우저에서 HTML 파일을 열면 아름다운 비행 효과를 관찰할 수 있습니다. 🎜🎜이 글의 안내를 통해 CSS를 사용하여 비행 효과를 만드는 방법을 배우고 더 나아가 자신의 웹 디자인에 적용할 수 있기를 바랍니다. 🎜

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