html5 css3 サンプル チュートリアル html5 および css3_html5 チュートリアル スキルで実装された小型ロボットの歩行アニメーション

これまでhtml5とcss3で実装したアニメーションをたくさん紹介してきましたが、今日はhtml5とcss3で実装した小型ロボットの歩行アニメーションをお届けしたいと思います。この例の文字は HTML5 で描画されており、アニメーション効果は HTML5 と CSS3 で実現されています。レンダリングを見てみましょう。

実装コード。

htmlコード:

コードをコピーします

コードは次のとおりです:

x="0px" y="0px" viewbox="0 0 458 337" enable-background="new 0 0 458 337" xml:space="preserve">





< ;g>

<パス d="M287.8,189.9l-16.8-19.6c-1.4-2.1-3.6-1.9-4.8,0.3l-0.7,1.3c-1.2,2.2-1,5.7,0.4,7.7l16,27.8 l1,1c3.8-2.7,6.9-6.2,8.9-10.3
L287.8,189.9z" />


;















<パス fill="#262626" ストローク="#000000" ストローク幅="0.9111" d="M270.8,217.6c2.2-1.1,4.1-4.1,4.1-6.6l0- 35.4
c0-2.5-1.8-5.5-4.1-6.6l-23.3-11.6c-2.2-1.1-5.9-1.1-8.1,0L198,178.2c-2.2,1.1-4.1,4.1-4.1,6.6v35。 3c0,2.5,1.8,5.5,4.1,6.6
l23.2,11.6c2.2,1.1,5.9,1.1,8.1,0L270.8,217.6z" />

< ;パス 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" />






<パス fill="#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>

<パス fill="#262626" ストローク="#000000" ストローク幅="0.9111" d="M234.1,232.9l-12-34.8c-0.8 -2.4-3.5-4.6-6-4.9l-15.7-2.1
c-2.5-0.3-5.9,0.9-7.7,2.7l-1,1.1c-1.7,1.8-2.5,5.2-1.7,7.6l11 .9,34.5C213.3,239.4,225.3,241.7,234.1,232.9z" />









< path fill="#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" ポイント="257,143.2 244.4,84.3 264.4,75.9 275.9,132.3 " />
<ポリゴン塗りつぶし="#FE4D55" ポイント="194.6,110.7 257,143.2 257,143.2 244.4,84.3 244.4,84.3 241.3,104 241.3 ,104 223.4,55.6
223.4,55.6 227.5,102.7 227.5,102.7 201.1,67 201.1,67 215.7,102.7 215.7,102.7 191.3,77.7 191.3,77.7 2 04.7,103.9 204.7,103.9
185.6,93.4 185.6,93.4 " />


gradientunits="userSpaceOnUse">

css3代码：

复制代码

代码如下:

html {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: 継承;
ボックス-サイジング: 継承;
}

html,body {
height:100%;
margin: 0;
font: 40px/40px "Helvetica Neue";
font-weight: 900;
color: rgba(255, 255, 255, 1);
-webkit-font-smoothing: アンチエイリアス;
font-smoothing: アンチエイリアス;
}

svg {
幅: 100%;
高さ: 100%;
}

#left-eye {
-webkit-transform-origin: 283px 176px;
-ms-transform-origin: 283px 176px;
transform-origin: 283px 176px;
/*アニメーション: パルス 2 秒線形無限;*/
}
#head {
-webkit-transform-origin: 235px 173px;
-ms-transform-origin: 235px 173px;
変換元: 235px 173px;
-webkit-animation: ヘッド 2 のイーズインアウトは無限です。
アニメーション: ヘッド 2 のイーズインアウト無限;
}

#右眉毛、#左眉毛 {
-webkit-animation: 眉毛 10 秒線形無限;
アニメーション: 眉毛 10 秒線形無限;
}

#left-leg {
-webkit-transform-origin: 253px 225px;
-ms-transform-origin: 253px 225px;
transform-origin: 253px 225px;
-webkit-animation: 左脚 2 秒のイーズインアウト無限。
アニメーション: 左脚 2 秒イーズインアウト無限;
}

#right-leg {
-webkit-transform-origin: 225px 235px;
-ms-transform-origin: 225px 235px;
transform-origin: 225px 235px;
-webkit-animation: 右脚 2 秒のイーズインアウト無限。
アニメーション: 右脚 2s イーズインアウト無限;
}
#left-arm {
-webkit-transform-origin: 263px 186px;
-ms-transform-origin: 263px 186px;
変換元: 263px 186px;
-webkit-animation: 左腕 2 秒のイーズインアウト無限。
アニメーション: 左腕 2 秒のイーズインアウト無限;
}

#right-arm {
-webkit-transform-origin: 209px 214px;
-ms-transform-origin: 209px 214px;
transform-origin: 209px 214px;
-webkit-animation: 右腕 2 秒のイーズインアウト無限。
アニメーション: 右腕 2s イーズインアウト無限;
}
#hair {
-webkit-filter: hue-rotate(45deg);
filter: hue-rotate(45deg) ; /* izza が動作しません! */
}

@-webkit-keyframes leftleg {
0%{
-webkit-transform: 回転(0度);
変換: 回転(0度);
}
50%{
-webkit-transform: 回転(55 度);
変換: 回転(55 度);
}
100%{
-webkit-transform: 回転(0 度);
変換: 回転(0度);
}
}

@keyframes leftleg {
0%{
-webkit-transform: 回転(0度);
変換: 回転(0度);
}
50%{
-webkit-transform: 回転(55 度);
変換: 回転(55 度);
}
100%{
-webkit-transform: 回転(0 度);
変換: 回転(0度);
}
}

@-webkit-keyframes rightleg {
0%{
-webkit-transform:回転(25度);
変換:回転(25度);
}
50%{
-webkit-transform: 回転(-40 度);
変換: 回転(-40 度);
}
100%{
-webkit-transform: 回転(25 度);
変換: 回転(25度);
}
}

@keyframes rightleg {
0%{
-webkit-transform:回転(25度);
変換:回転(25度);
}
50%{
-webkit-transform: 回転(-40度);
変換: 回転(-40度);
}
100%{
-webkit-transform: 回転(25度);
変換:回転(25度);
}
}

@-webkit-keyframes rightarm {
0%{
-webkit-transform: 回転(0度);
変換: 回転(0度);
}
50%{
-webkit-transform: 回転(40 度);
変換: 回転(40 度);
}
100%{
-webkit-transform: 回転(0 度);
変換: 回転(0度);
}
}

@keyframes rightarm {
0%{
-webkit-transform: 回転(0度);
変換: 回転(0度);
}
50%{
-webkit-transform: 回転(40度);
変換: 回転(40度);
}
100%{
-webkit-transform: 回転(0度);
変換: 回転( 0度);
}
}

@-webkit-keyframes leftarm {
0%{
-webkit-transform:回転(50度);
変換:回転(50度);
}
50%{
-webkit-transform: 回転(0度);
変換: 回転(0度);
}
100%{
-webkit-transform: 回転(50度);
変換: 回転(50度);
}
}

@keyframes leftarm {
0%{
-webkit-transform:回転(50度);
変換:回転(50度);
}
50%{
-webkit-transform: 回転(0度);
変換: 回転(0度);
}
100%{
-webkit-transform: 回転(50度);
変換: 回転( 50 度);
}
}

@-webkit-keyframes head {
0%{
-webkit-transform: 回転(0度);
変換: 回転(0度);
}
50%{
-webkit-transform: 回転(-5 度);
変換: 回転(-5 度);
}
100%{
-webkit-transform: 回転(0 度);
変換: 回転(0度);
}
}

@keyframes head {
0%{
-webkit-transform:回転(0度);
変換:回転(0度);
}
50%{
-webkit-transform: 回転(-5度);
変換: 回転(-5度);
}
100%{
-webkit-transform: 回転(0度);
変換:回転(0度);
}
}

@-webkit-keyframespulse {
0%{
-webkit-transform:scale(1);
transform:scale(1);
}
50%{
-webkit-transform:scale(1.1);
transform:scale(1.1);
}
100%{
-webkit-transform:scale(1);
変換:scale(1);
}
}

@keyframes パルス {
0%{
-webkit-transform:scale(1);
transform:scale(1);
}
50%{
-webkit-transform: スケール(1.1);
トランスフォーム: スケール(1.1);
}
100%{
-webkit-transform: スケール(1);
トランスフォーム: スケール(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:translate(0, 0px);
transform:translate(0, 0px);
}
}