오늘 우리는 CSS3을 사용하여 Google Doodle 애니메이션을 완료하는 방법을 소개합니다. 데모 페이지에서 [시작] 버튼을 클릭하면 페이지의 라이더와 말이 움직입니다. http://demo.cuoxin.com/js/2012/googlecss3/">css3/
여기서 강조해야 할 한 가지는 IE가 CSS3의 애니메이션 속성을 지원하지 않으며 IE에 대해 다시 불평한다는 것입니다. 그러나 우리는 이것을 CSS3을 받아들이지 않는 이유로 사용할 수 없습니다.
먼저 HTML 코드를 살펴 보겠습니다.
<! doctype html>
<html>
<헤드>
<제목> </title>
<link rel = "Stylesheet"type = "text/css"href = "css/google-doodle-animation-in-css3-without-javaScript.css"/>
</head>
<body>
<div id = "로고">
<div>
<img src = "img/muybridge12-hp-v.png"/>
</div>
<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>
<div> </div>
<div> </div>
<div> </div>
</div>
</body>
</html>
아래는 일부 CS입니다.
*{마진 : 0px; 패딩 : 0px;}
#Logo {위치 : 상대;}
.말{
너비 : 469px;
높이 : 54px;
배경 : URL ( '../ IMG/MUYBRIDGE12-HP-F.JPG');
}
.frame {위치 : 절대; 왼쪽 : 0; 상단 : 0; z-index : 1;}
#Play_Button {display : none;}
#play_label {
너비 : 67px;
높이 : 54px;
디스플레이 : 블록;
위치 : 절대;
왼쪽 : 201px;
상단 : 54px;
z- 인덱스 : 2;
}
#play_image {
위치 : 절대;
왼쪽 : 201px;
상단 : 54px;
z- 인덱스 : 0;
오버플로 : 숨겨진;
너비 : 68px;
높이 : 55px;
}
#play_image img {
위치 : 절대;
왼쪽 : 0;
상단 : 0;
}
코드 의이 부분은 너무 어렵지 않으므로 자세히 설명하지 않습니다. CSS에서 견고하지 않은 독자는 [시작] 버튼이 어떻게 배치되는지 궁금해 할 수 있습니다. 위치 속성을 직접 읽으면 절대의 특정 기능을 이해할 수 있습니다.
아래는 위의 HTML 및 CSS 코드에서 완료 한 페이지 효과입니다.
사진
애니메이션 효과를 생성하는 방법을 소개하겠습니다. 먼저 다른 단계에서 애니메이션의 효과를 지정하는 키 프레임을 정의해야합니다. http://www.w3schools.com/css3/css3_animations.asp에서 자세한 내용을 배울 수 있습니다.
우리는 Horse-Ride라는 키 프레임을 만들었고 Chrome 및 Firefox의 경우 -webkit- 또는 -moz-를 접두사해야합니다. 0% 및 100%는 각각 코드를 시작하고 종료합니다. 50%의 애니메이션 효과와 같은 필요에 따라 새로운 사례를 추가 할 수 있습니다.
@-webkit-keyframes Horse-Ride {
% {배경 위치 : 0 0;}
% {배경 위치 : -804px 0;}
}
@-moz-keyframes Horse-Ride {
% {배경 위치 : 0 0;}
% {배경 위치 : -804px 0;}
}
다음으로 말에 대한 CSS3의 애니메이션 효과를 추가합니다.
#Play_Button : 확인 ~ .horse {
-webkit- 애니메이션 : 말-기준 0.5s 단계 (12, 끝) 무한대;
-webkit- 애니메이션-지연 : 2.5s;
-Moz-Animation : 말-기준 0.5S 단계 (12, End) 무한;
-Moz- 애니메이션-지연 : 2.5S;
배경 위치 : -2412px 0;
-webkit-transition : 모든 2.5s 입방-베 지어 (0.550, 0.055, 0.675, 0.190);
-Moz-transition : 모든 2.5S 입방-베 지어 (0.550, 0.055, 0.675, 0.190);
}
여기에서 먼저 다음을 소개합니다. Checked and ~, : Checked는 #Play_Button을 선택할 때 CSS 효과를 참조하고 #PLAY_BUTTON의 형제 노드를 나타냅니다.
다음으로 .horse와 관련된 CSS 속성을 소개합니다. 애니메이션에서는 키 프레임 (위에서 정의한 말-라이드), 애니메이션 간격 시간, 애니메이션 효과 및 실행 시간을 나타내는 4 가지 값을 사용합니다. 그런 다음 애니메이션 지연 시간을 애니메이션 지연으로 설정했습니다. 전환과 배경 위치를 결합하여 배경의 전환 애니메이션을 설정하십시오.
마지막으로 [시작] 버튼에 애니메이션 효과를 추가합니다.
#play_button : checked ~#play_image img {
왼쪽 : -68px;
-webkit-transition : 모든 0.5 초의 용이성;
-Moz-transition : 모든 0.5 초의 용이함;
}
직접 개발하려고 노력할 수 있습니다.
데모 다운로드 주소 : Google-Doodle-Animation-in-CSS3-without-javaScript.zip 오늘 CSS3을 사용하여 Google Doodle 애니메이션을 완료하는 방법을 소개합니다. 데모 페이지에서 [시작] 버튼을 클릭하면 페이지의 라이더와 말이 이동합니다.
여기서 강조해야 할 한 가지는 IE가 CSS3의 애니메이션 속성을 지원하지 않으며 IE에 대해 다시 불평한다는 것입니다. 그러나 우리는 이것을 CSS3을 받아들이지 않는 이유로 사용할 수 없습니다.
먼저 HTML 코드를 살펴 보겠습니다.
<! doctype html>
<html>
<헤드>
<제목> </title>
<link rel = "Stylesheet"type = "text/css"href = "css/google-doodle-animation-in-css3-without-javaScript.css"/>
</head>
<body>
<div id = "로고">
<div>
<img src = "img/muybridge12-hp-v.png"/>
</div>
<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>
<div> </div>
<div> </div>
<div> </div>
</div>
</body>
</html>
아래는 일부 CS입니다.
*{마진 : 0px; 패딩 : 0px;}
#Logo {위치 : 상대;}
.말{
너비 : 469px;
높이 : 54px;
배경 : URL ( '../ IMG/MUYBRIDGE12-HP-F.JPG');
}
.frame {위치 : 절대; 왼쪽 : 0; 상단 : 0; z-index : 1;}
#Play_Button {display : none;}
#play_label {
너비 : 67px;
높이 : 54px;
디스플레이 : 블록;
위치 : 절대;
왼쪽 : 201px;
상단 : 54px;
z- 인덱스 : 2;
}
#play_image {
위치 : 절대;
왼쪽 : 201px;
상단 : 54px;
z- 인덱스 : 0;
오버플로 : 숨겨진;
너비 : 68px;
높이 : 55px;
}
#play_image img {
위치 : 절대;
왼쪽 : 0;
상단 : 0;
}
코드 의이 부분은 너무 어렵지 않으므로 자세히 설명하지 않습니다. CSS에서 견고하지 않은 독자는 [시작] 버튼이 어떻게 배치되는지 궁금해 할 수 있습니다. 위치 속성을 직접 읽으면 절대의 특정 기능을 이해할 수 있습니다.
아래는 위의 HTML 및 CSS 코드에서 완료 한 페이지 효과입니다.
사진
애니메이션 효과를 생성하는 방법을 소개하겠습니다. 먼저 다른 단계에서 애니메이션의 효과를 지정하는 키 프레임을 정의해야합니다. http://www.w3schools.com/css3/css3_animations.asp에서 자세한 내용을 배울 수 있습니다.
우리는 Horse-Ride라는 키 프레임을 만들었고 Chrome 및 Firefox의 경우 -webkit- 또는 -moz-를 접두사해야합니다. 0% 및 100%는 각각 코드를 시작하고 종료합니다. 50%의 애니메이션 효과와 같은 필요에 따라 새로운 사례를 추가 할 수 있습니다.
@-webkit-keyframes Horse-Ride {
% {배경 위치 : 0 0;}
% {배경 위치 : -804px 0;}
}
@-moz-keyframes Horse-Ride {
% {배경 위치 : 0 0;}
% {배경 위치 : -804px 0;}
}
다음으로 말에 대한 CSS3의 애니메이션 효과를 추가합니다.
#Play_Button : 확인 ~ .horse {
-webkit- 애니메이션 : 말-기준 0.5s 단계 (12, 끝) 무한대;
-webkit- 애니메이션-지연 : 2.5s;
-Moz-Animation : 말-기준 0.5S 단계 (12, End) 무한;
-Moz- 애니메이션-지연 : 2.5S;
배경 위치 : -2412px 0;
-webkit-transition : 모든 2.5s 입방-베 지어 (0.550, 0.055, 0.675, 0.190);
-Moz-transition : 모든 2.5S 입방-베 지어 (0.550, 0.055, 0.675, 0.190);
}
여기에서 먼저 다음을 소개합니다. Checked and ~, : Checked는 #Play_Button을 선택할 때 CSS 효과를 참조하고 #PLAY_BUTTON의 형제 노드를 나타냅니다.
다음으로 .horse와 관련된 CSS 속성을 소개합니다. 애니메이션에서는 키 프레임 (위에서 정의한 말-라이드), 애니메이션 간격 시간, 애니메이션 효과 및 실행 시간을 나타내는 4 가지 값을 사용합니다. 그런 다음 애니메이션 지연 시간을 애니메이션 지연으로 설정했습니다. 전환과 배경 위치를 결합하여 배경의 전환 애니메이션을 설정하십시오.
마지막으로 [시작] 버튼에 애니메이션 효과를 추가합니다.
#play_button : checked ~#play_image img {
왼쪽 : -68px;
-webkit-transition : 모든 0.5 초의 용이성;
-Moz-transition : 모든 0.5 초의 용이함;
}
직접 개발하려고 노력할 수 있습니다.
데모 다운로드 주소 : http://xiazai.cuoxin.com/201212/yuanma/googlecsss3_jb51.rar