간단하고 사용하기 쉬운 애니메이션 라이브러리인 Animate.css를 소개합니다.-CSS 튜토리얼-php.cn

간단하고 사용하기 쉬운 애니메이션 라이브러리인 Animate.css를 소개합니다.

零下一度

풀어 주다： 2017-05-02 14:19:24

원래의

2037명이 탐색했습니다.

아름답고 멋진 웹페이지는 애니메이션 효과와 떼려야 뗄 수 없습니다. 지금 선택할 수 있는 애니메이션 라이브러리가 많이 있습니다. 여기서는 간단하고 사용하기 쉬운 애니메이션 라이브러리 Animate.css를 소개하겠습니다.

animate.css 온라인 효과는 온라인 웹 페이지를 사용하여 모든 애니메이션 효과를 보여줍니다. 실제 애니메이션 효과를 보려면 드롭다운 목록에서 효과 이름을 선택하기만 하면 됩니다. 이 웹사이트로 직접 이동하여 이러한 애니메이션 효과를 테스트할 수 있습니다.

간단하고 사용하기 쉬운 애니메이션 라이브러리인 Animate.css를 소개합니다.

테스트가 완료된 후 프로젝트에 추가할 수 있습니다. Bower나 npm을 사용하여 다운로드할 수 있습니다.

bower install animate.css --savenpm install animate.css --save

로그인 후 복사

는 CDNJS를 사용한 다음 페이지에서 animate.css 파일을 참조할 수도 있습니다.

<head>
  <link rel="stylesheet" href="www.php.cn/ajax/libs/animate.css/3.5.2/animate.min.css"></head>

로그인 후 복사

마지막으로 애니메이션 효과를 적용하려는 요소에 animated 클래스와 해당 애니메이션 클래스를 추가합니다. 예를 들어 아래에는 리바운드 애니메이션 효과가 적용되어 있습니다. 코드를 HTML 파일로 직접 저장한 다음 브라우저에서 효과를 볼 수 있습니다.

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <link rel="stylesheet" href="www.php.cn/ajax/libs/animate.css/3.5.2/animate.min.css"></head><body><h1 class="animated bounce">弹弹弹！</h1></body></html>

로그인 후 복사

이런 방식으로 이 애니메이션 라이브러리가 도입되었습니다. 자신만의 프로젝트가 있다면 몇 가지 요소에 애니메이션 효과를 주어 페이지를 더욱 생동감 있게 만드는 것을 고려해 볼 수 있습니다.

간단하고 사용하기 쉬운 애니메이션 라이브러리인 Animate.css를 소개합니다.

테스트가 완료된 후 프로젝트에 추가할 수 있습니다. Bower나 npm을 사용하여 다운로드할 수 있습니다.

bower install animate.css --savenpm install animate.css --save

로그인 후 복사

는 CDNJS를 사용한 다음 페이지에서 animate.css 파일을 참조할 수도 있습니다.

<head>
  <link rel="stylesheet" href="www.php.cn/ajax/libs/animate.css/3.5.2/animate.min.css"></head>

로그인 후 복사

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <link rel="stylesheet" href="www.php.cn/ajax/libs/animate.css/3.5.2/animate.min.css"></head><body><h1 class="animated bounce">弹弹弹！</h1></body></html>

로그인 후 복사

위 내용은 간단하고 사용하기 쉬운 애니메이션 라이브러리인 Animate.css를 소개합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!