コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

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

WBOY
リリース： 2016-05-16 15:47:19
オリジナル
1833 人が閲覧しました

これまで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);
}
}

関連ラベル：
css3 css3アニメーション html5
ソース：php.cn
前の記事：ガールフレンドへのロマンチックなギフト、3D ラブ アニメーションを作成する HTML5 チュートリアル_html5 チュートリアル スキル 次の記事：HTML5 キャンバス メソッドの使用ガイド_html5 チュートリアルのスキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート