> 웹 프론트엔드 > H5 튜토리얼 > HTML5 실습 - CSS3를 활용하여 구글 그래피티 애니메이션을 완성하는 방법에 대한 자세한 설명

HTML5 실습 - CSS3를 활용하여 구글 그래피티 애니메이션을 완성하는 방법에 대한 자세한 설명

黄舟
풀어 주다: 2017-03-22 16:22:24
원래의
1696명이 탐색했습니다.

오늘은 CSS3를 활용하여 구글 그래피티 애니메이션을 완성하는 방법을 소개하겠습니다. 데모 페이지에서 [시작] 버튼을 클릭하면 페이지의 라이더와 말이 이동합니다.

여기서 강조해야 할 점은 IE가 CSS3 I의 애니메이션 속성을 지원하지 않는다는 것입니다. 다시 사악한 IE에 대해 불평하고 있습니다. 그러나 우리는 이것을 CSS3를 수용하지 않는 이유로 사용할 수 없습니다.

먼저 html 코드를 살펴보겠습니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <link rel="stylesheet" type="text/css" href="css/google-doodle-animation-in-css3-without-javascript.css"/>

</head>

<body>

<p id="logo">

    <p class="frame">

        <img src="img/muybridge12-hp-v.png"/>

    </p>

    <label for="play_button" id="play_label"></label>

    <input type="checkbox" id="play_button" name="play_button"/>

    <span id="play_image">

        <img src="img/muybridge12-hp-p.jpg"/>

    </span>

    <p class="horse"></p>

    <p class="horse"></p>

    <p class="horse"></p>

</p>

</body>

</html>

로그인 후 복사

다음은 CSS의 일부입니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

*{margin:0px;padding:0px;}

#logo{position: relative;}

.horse{

    width:469px;

    height:54px;

    background: url(&#39;../img/muybridge12-hp-f.jpg&#39;);

}

.frame{position:absolute;left:0;top:0;z-index: 1;}

 

#play_button{display: none;}

#play_label{

    width:67px;

    height:54px;

    display:block;

    position: absolute;

    left:201px;

    top:54px;

    z-index: 2;

}

#play_image{

    position: absolute;

    left:201px;

    top:54px;

    z-index: 0;

    overflow: hidden;

    width: 68px;

    height: 55px;

}

#play_image img{

    position: absolute;

    left: 0;

    top: 0;

}

로그인 후 복사

이 부분은 코드가 그리 어렵지 않으니 자세히 설명하지 않겠습니다. CSS에 대한 기초가 그다지 탄탄하지 않은 독자라면 [시작] 버튼의 위치가 궁금할 수도 있습니다. 절대의 특정 역할을 이해하기 위해 위치 속성을 직접 읽을 수 있습니다.

다음은 위의 html, css 코드로 완성된 페이지 효과입니다.

이제 애니메이션 효과 제작 방법을 소개하겠습니다. 먼저 다양한 단계에서 애니메이션 효과를 지정하는 키프레임을 정의해야 합니다. 자세한 내용은 http://www.w3schools.com/css3/css3_animations.asp에서 알아볼 수 있습니다.

Chrome 및 Firefox의 경우 앞에 -webkit- 또는 -moz- 접두어를 추가해야 합니다. 0%와 100%는 각각 코드의 시작과 끝입니다. 50%의 애니메이션 효과와 같이 필요에 따라 새로운 사례를 추가할 수 있습니다.

1

2

3

4

5

6

7

8

@-webkit-keyframes horse-ride {

    0% {background-position: 0 0;}

    100% {background-position: -804px 0;}

}

@-moz-keyframes horse-ride {

    0% {background-position: 0 0;}

    100% {background-position: -804px 0;}

}

로그인 후 복사

다음으로 말에 CSS3 애니메이션 효과를 추가해 보겠습니다.

1

2

3

4

5

6

7

8

9

#play_button:checked ~.horse{

    -webkit-animation:horse-ride 0.5s steps(12,end) infinite;

    -webkit-animation-delay:2.5s;

    -moz-animation:horse-ride 0.5s steps(12,end) infinite;

    -moz-animation-delay:2.5s;

    background-position: -2412px 0;

    -webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);

    -moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);

}

로그인 후 복사

여기서 먼저 :checked와 ~를 소개합니다. :checked는 #play_button이 선택되었을 때 CSS 효과를 나타내는 의사 클래스 이고 ~는 형제 노드를 나타냅니다. #재생버튼.

다음으로 .horse와 관련된 CSS 속성을 소개하겠습니다. 애니메이션에서는 키프레임(위에서 정의한 승마), 애니메이션 간격, 애니메이션 효과 및 실행 횟수를 나타내는 4가지 값을 사용합니다. 그런 다음 animation-delay를 통해 애니메이션 지연 시간을 설정합니다. 전환과 배경 위치를 결합하여 배경 전환 애니메이션을 설정합니다.

마지막으로 [시작] 버튼에 애니메이션 효과를 추가합니다.

아아아아

위 내용은 HTML5 실습 - CSS3를 활용하여 구글 그래피티 애니메이션을 완성하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿