CSS3를 사용하여 애니메이션 효과를 얻는 방법을 단계별로 가르쳐줍니다(코드 공유).

이전 기사 "H5: 페이지에 애니메이션을 구현하는 여러 가지 방법이 있나요? (첨부코드) " 페이지에서 애니메이션을 구현하는 여러 가지 방법을 알려드립니다. 다음 기사에서는 CSS3를 사용하여 간단하고 아름다운 애니메이션 효과를 얻는 방법을 소개합니다.

CSS3의 애니메이션을 검토해 보세요. 이제 플래시를 거의 쓸 수 없게 되었습니다. 그때는 그랬지만 시대가 변해서 안타깝습니다. 이 기사를 문서로 취급하세요

브라우저 지원

Internet Explorer 10, Firefox 및 Opera는 애니메이션 속성을 지원합니다.

Safari와 Chrome은 대체 -webkit-animation 속성을 지원합니다.

참고: Internet Explorer 9 이하 버전은 애니메이션 속성을 지원하지 않습니다.

정의 및 사용법

animation 속성은 6개의 애니메이션 속성

• animation-name

• animation-duration

• animation-timing-function을 설정하는 약식 속성입니다. 애니메이션 지연

• 애니메이션 반복 횟수 애니메이션 방향

Syntax

animation: name duration timing-function delay iteration-count direction;

키프레임 정의 정보

• Firefox는 대체 @-moz-keyframes 규칙을 지원합니다. Opera는 대체 @-o-keyframes 규칙을 지원합니다.
  

Safari 및 Chrome은 대체 @-webkit-keyframes 규칙을 지원합니다.

• 
  

은 0-100% 및 from, to를 지원합니다.

• 
  

  @keyframes move {
    0% {
      top: 0px;
      left: 0px;
    }
    25% {
      top: 200px;
      left: 200px;
    }
    50% {
      top: 100px;
      left: 100px;
    }
    75% {
      top: 200px;
      left: 200px;
    }
  
    100% {
      top: 0px;
      left: 0px;
    }
  }
  
  @keyframes move {
    from {
      top: 0px;
      left: 0px;
    }
    to {
      top: 0px;
      left: 100px;
    }
  }

  로그인 후 복사
  데모 예를 작성했습니다. 지구는 태양을 중심으로 회전합니다

다음은 코드입니다

<!-- html 部分 -->
<div style="width:700px; ">
  <div class="t">
    <div class="t1"></div>
  </div>
</div>

/* css 部分 */
@keyframes t {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes t {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.t {
  height: 500px;
  width: 500px;
  position: relative;
  border-radius: 50%;
  transform: scale(.8);
  border: 1px solid #dedede;
  &::before {
    content: "";
    width: 50px;
    height: 50px;
    background: radial-gradient(72px, #f00, #ff0, #080);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -25px;
    box-shadow: 0 0 37px #fcff4a;
  }
  .t1 {
    height: 20px;
    border-radius: 50%;
    width: 20px;
    margin-top: -10px;
    top: 50%;
    left: -10px;
    background: radial-gradient(26px, #0082ff, #184608, #003ade);
    position: absolute;
    animation: t 3s infinite linear;
    transform-origin: 260px center;
  }
}

</style>

학습 추천CSS3 영상 튜토리얼

위 내용은 CSS3를 사용하여 애니메이션 효과를 얻는 방법을 단계별로 가르쳐줍니다(코드 공유).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!