오늘은 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('../img/muybridge12-hp-f.jpg');
}
.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!