html5 css3 예제 튜토리얼 html5 및 css3_html5 튜토리얼 기술로 구현된 작은 로봇 걷기 애니메이션

이전에도 html5와 css3로 구현한 애니메이션을 많이 소개해드렸는데요, 오늘은 html5와 css3로 구현한 작은 로봇의 걷는 애니메이션을 소개해드리고자 합니다. 이 예제의 캐릭터는 HTML5로 그려졌고, 애니메이션 효과는 HTML5와 CSS3로 구현되었습니다. 렌더링을 살펴보겠습니다.

구현 코드.

　html 코드:

코드 복사

코드는 다음과 같습니다.

x="0px" y="0px" viewbox="0 0 458 337" 활성화-배경="새 0 0 458 337" xml:space="preserve">





< ;g>
















<경로 채우기="#000" 스트로크="#000000" 스트로크 너비="0.9111" d ="M240.8,227.1c1.7,1.9,1,3.6-1.5,3.8l-13.8,1.1
c-2.5,0.2-5.9-1.2-7.5-3.1l-11.8-13.4c-1.7-1.9- 1-3.6,1.5-3.8l13.8-1.1c2.5-0.2,5.9,1.2,7.5,3.1L240.8,227.1z" />




< ;경로 d="M274.9,211c0,2.5-1.8,5.5-4.1,6.6l-41.4,20.7c-2.2,1.1-4.1,0-4.1-2.5v-35.4c0-2.5,1.8-5.5,4.1- 6.6l41.4-20.7
c2.2-1.1,4.1,0,4.1,2.5V211z" />






< 경로 채우기="#FDB473" d="M223.7,238.6l5.5,9.2c0.8,2.4,2.9,2.8,4.7,1l1-1.1c1.8-1.8,2.5-5.2,1.7-7.6l-2.5- 7.3
C231,236,227.5,237.7,223.7,238.6z" />

< ;/g>











< 경로 채우기="#FDBF88" 스트로크="#000000" 스트로크-폭="0.9111" d="M288.6,197.1c4.5-2.2,8.2-8.2,8.2-13.2l0-52.5
c0-5-3.7 -10.9-8.1-13.2L242,94.9c-4.5-2.2-11.8-2.2-16.3,0l-46.4,23.4c-4.5,2.3-8.1,8.2-8.1,13.2v52.4c0,5,3.7,10.9,8.1 ,13.2
l46.4,23.2c4.5,2.2,11.8,2.2,16.3,0L288.6,197.1z" />





y1="180.6" x2="266.4" y2="181.7" />
y1="177.4" x2="288.4" y2="164.6" />
r="3.8" />
r="3.8" />


<다각형 채우기= "#FFCCCE" 스트로크="#000000" 스트로크-폭="0.9111" 포인트="204.7,103.9 185.6,93.4 204.8,85.9 223.9,95.7 " />
<다각형 채우기="#FF999E" 스트로크= "#000000" 스트로크 폭="0.9111" 포인트="215.7,102.7 191.3,77.7 211,70.6 235.1,94.3 " />
<다각형 채우기="#FE666D" 스트로크="#000000" 스트로크- width="0.9111" points="227.5,102.7 201.1,67 221.1,60.1 247,94 " />
<다각형 채우기="#FE333D" 스트로크="#000000" 스트로크-폭="0.9111" 포인트="241.3,104 223.4,55.6 243.9,48.7 261,94.9 " />
<다각형 채우기=" #FE000C" points="257,143.2 244.4,84.3 264.4,75.9 275.9,132.3 " />



gradientunits="userSpaceOnUse">

　　css3代码：

复代码

代码如下:

html {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-moz-상자 크기: 상속;
상자 크기: 상속;
}

html,body {
높이:100%;
여백: 0;
글꼴: 40px/40px "Helvetica Neue";
글꼴 두께: 900;
색상: rgba(255, 255, 255, 1);
-webkit-font-smoothing: 앤티앨리어싱;
글꼴 다듬기: 앤티앨리어싱;
}

svg {
너비: 100%;
높이: 100%;
}

#왼쪽 눈 {
-webkit-transform-origin: 283px 176px;
-ms-transform-origin: 283px 176px;
변환-원산: 283px 176px;
/*애니메이션: 펄스 2s 선형 무한;*/
}
#head {
-webkit-transform-origin: 235px 173px;
-ms-transform-origin: 235px 173px;
변환 원본: 235px 173px;
-webkit-animation: 헤드 2s 이지인아웃 무한;
애니메이션: 헤드 2s 이지인아웃 무한;
}

#오른쪽 눈썹, #왼쪽 눈썹 {
-webkit-animation: 눈썹 10초 선형 무한;
애니메이션: 눈썹 10초 선형 무한;
}

#왼쪽 다리 {
-webkit-transform-origin: 253px 225px;
-ms-transform-origin: 253px 225px;
변환-원산: 253px 225px;
-webkit-animation: leftleg 2s 이지인아웃 무한;
애니메이션: leftleg 2s 이지인아웃 무한;
}

#right-leg {
-webkit-transform-origin: 225px 235px;
-ms-transform-origin: 225px 235px;
변환-원산지: 225px 235px;
-webkit-animation: rightleg 2s 이지인아웃 무한;
애니메이션: rightleg 2s easy-in-out 무한;
}
#left-arm {
-webkit-transform-origin: 263px 186px;
-ms-transform-origin: 263px 186px;
변환 원본: 263px 186px;
-webkit-animation: leftarm 2s 이지인아웃 무한;
애니메이션: leftarm 2s 이지인아웃 무한;
}

#right-arm {
-webkit-transform-origin: 209px 214px;
-ms-transform-origin: 209px 214px;
변환-원산: 209px 214px;
-webkit-animation: rightarm 2s 이지인아웃 무한;
애니메이션: rightarm 2s 이즈인아웃 무한;
}
#hair {
-webkit-filter: 색조 회전(45deg);
필터: 색조 회전(45deg) ; /* izza가 작동하지 않습니다. */
}

@-webkit-keyframes leftleg {
0%{
-webkit-transform: 회전(0deg);
변환: 회전(0deg);
}
50%{
-webkit-transform: 회전(55deg);
변환: 회전(55deg);
}
100%{
-webkit-transform: 회전(0deg);
변환: 회전(0deg);
}
}

@keyframes 왼쪽 다리 {
0%{
-webkit-transform: 회전(0deg);
변환: 회전(0deg);
}
50%{
-webkit-transform: 회전(55deg);
변환: 회전(55deg);
}
100%{
-webkit-transform: 회전(0deg);
변환 : 회전(0deg);
}
}

@-webkit-keyframes 오른쪽 다리 {
0%{
-webkit-transform: 회전(25deg);
변환: 회전(25deg);
}
50%{
-webkit-transform: 회전(-40deg);
변환: 회전(-40deg);
}
100%{
-webkit-transform: 회전(25deg);
변환: 회전(25deg);
}
}

@keyframes rightleg {
0%{
-webkit-transform: 회전(25deg);
변환: 회전(25deg);
}
50%{
-webkit-transform: 회전(-40deg);
변환: 회전(-40deg);
}
100%{
-webkit-transform: 회전(25deg);
변환: 회전(25도);
}
}

@-webkit-keyframes 오른쪽 팔 {
0%{
-webkit-transform: 회전(0deg);
변환: 회전(0deg);
}
50%{
-webkit-transform: 회전(40deg);
변환: 회전(40deg);
}
100%{
-webkit-transform: 회전(0deg);
변환 : 회전(0deg);
}
}

@keyframes 오른쪽 팔 {
0%{
-webkit-transform: 회전(0deg);
변환: 회전(0deg);
}
50%{
-webkit-transform: 회전(40deg);
변환: 회전(40deg);
}
100%{
-webkit-transform: 회전(0deg);
변환: 회전( 0deg);
}
}

@-webkit-keyframes 왼팔 {
0%{
-webkit-transform: 회전(50deg);
변환: 회전(50deg);
}
50%{
-webkit-transform: 회전(0deg);
변환: 회전(0deg);
}
100%{
-webkit-transform: 회전(50deg);
변환 : 회전(50도);
}
}

@keyframes 왼쪽 팔 {
0%{
-webkit-transform: 회전(50deg);
변환: 회전(50deg);
}
50%{
-webkit-transform: 회전(0deg);
변환: 회전(0deg);
}
100%{
-webkit-transform: 회전(50deg);
변환: 회전( 50deg);
}
}

@-webkit-keyframes 헤드 {
0%{
-webkit-transform: 회전(0deg);
변환: 회전(0deg);
}
50%{
-webkit-transform: 회전(-5deg);
변환: 회전(-5deg);
}
100%{
-webkit-transform: 회전(0deg);
변환: 회전(0deg);
}
}

@keyframes 헤드 {
0%{
-webkit-transform: 회전(0deg);
변환: 회전(0deg);
}
50%{
-webkit-transform: 회전(-5deg);
변환: 회전(-5deg);
}
100%{
-webkit-transform: 회전(0deg);
변환: 회전(0deg);
}
}

@-webkit-keyframes 펄스 {
0%{
-webkit-transform: scale(1);
변환: scale(1);
}
50%{
-webkit-transform: scale(1.1);
변환: scale(1.1);
}
100%{
-webkit-transform: scale(1);
변환: scale(1);
}
}

@keyframes 펄스 {
0%{
-webkit-transform: scale(1);
변환: scale(1);
}
50%{
-webkit-transform: scale(1.1);
변환: scale(1.1);
}
100%{
-webkit-transform: scale(1);
변환 : scale(1);
}
}

@-webkit-keyframes 눈썹 {
0%{

}
98%{
-webkit-transform: 번역(0, 0px);
변환: 번역(0, 0px);
}
99%{
-webkit-transform: 번역(0, -5px);
변환: 번역(0, -5px);
}
100%{
-webkit-transform: 번역(0, 0px);
변환: 번역(0, 0px);
}
}

@keyframes 눈썹 {
0%{

}
98%{
-webkit-transform: 번역(0, 0px);
변환: 번역(0 , 0px);
}
99%{
-webkit-transform: 번역(0, -5px);
변환: 번역(0, -5px);
}
100%{
-webkit-transform: 번역(0, 0px);
변환: 번역(0, 0px);
}
}