HTML5 실습 - CSS3를 활용하여 구글 그래피티 애니메이션을 완성하는 방법에 대한 자세한 설명
- 黄舟원래의
- 2017-03-22 16:22:241613검색
오늘은 CSS3를 활용하여 구글 그래피티 애니메이션을 완성하는 방법을 소개하겠습니다. 데모 페이지에서 [시작] 버튼을 클릭하면 페이지의 라이더와 말이 이동합니다.
여기서 강조해야 할 점은 IE가 CSS3 I의 애니메이션 속성을 지원하지 않는다는 것입니다. 다시 사악한 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('../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%의 애니메이션 효과와 같이 필요에 따라 새로운 사례를 추가할 수 있습니다.
@-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 애니메이션 효과를 추가해 보겠습니다.
#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 중국어 웹사이트의 기타 관련 기사를 참조하세요!