집 > 기사 > 웹 프론트엔드 > html5와 css3를 사용하여 Google 그래피티 애니메이션을 완성하는 방법

html5와 css3를 사용하여 Google 그래피티 애니메이션을 완성하는 방법

PHP中文网원래의: 2017-03-16 13:17:421817검색

오늘은 CSS3를 활용하여 구글 두들 애니메이션을 완성하는 방법을 소개하겠습니다. 데모 페이지에서 [시작] 버튼을 클릭하면 페이지에 있는 기수와 말이 움직입니다.
여기서 강조해야 할 점은 IE가 CSS3의 애니메이션 속성을 지원하지 않는다는 점입니다. 다시 사악한 IE. 그러나 우리는 이것을 CSS3를 수용하지 않는 이유로 사용할 수 없습니다.
먼저 HTML 코드를 살펴보겠습니다.

<!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의 일부입니다.

*{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 코드로 완성된 페이지 효과입니다.
애니메이션 효과를 만드는 방법을 소개하겠습니다. 먼저 다양한 단계에서 애니메이션 효과를 지정하는 키프레임을 정의해야 합니다.
Horse-ride라는 키프레임을 만들었습니다. Chrome 및 Firefox의 경우 앞에 -webkit- 또는 -moz- 접두사를 추가해야 합니다. 0%와 100%는 각각 코드의 시작과 끝입니다. 50%의 애니메이션 효과와 같이 필요에 따라 새로운 사례를 추가할 수 있습니다.

@-webkit-keyframes horse-ride { 
% {background-position: 0 0;} 
% 
{background-position: -804px 0;} 
} 
@-moz-keyframes horse-ride { 
% 
{background-position: 0 0;} 
% {background-position: -804px 0;} 
}

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

#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 효과를 참조하고 ~는 #play_button의 형제 노드를 참조합니다.
다음으로 .horse와 관련된 CSS 속성을 소개하겠습니다. 애니메이션에서는 키프레임(위에서 정의한 승마), 애니메이션 간격, 애니메이션 효과 및 실행 횟수를 나타내는 4가지 값을 사용합니다. 그런 다음 animation-delay를 통해 애니메이션 지연 시간을 설정합니다. 전환과 배경 위치를 결합하여 배경 전환 애니메이션을 설정합니다.
마지막으로 [시작] 버튼에 애니메이션 효과를 추가합니다.

#play_button:checked ~#play_image img{ 
left:-68px; 
-webkit-transition: 
all 0.5s ease-in; 
-moz-transition: all 0.5s ease-in; 
}

직접 개발해 볼 수도 있습니다.

html5와 css3를 사용하여 Google 그래피티 애니메이션을 완성하는 방법

관련 기사