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

ホームページ

ウェブフロントエンド

H5 チュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:47 PM

css3css3アニメーション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>

L287.8,189.9z" />

;

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" />

C231,236,227.5,237.7,223.7,238.6z" />

;/g>

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" />

g>

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" />

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);
}
}

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML5フォームの新しいものは何ですか？新しい入力タイプの調査May 13, 2025 pm 03:45 PM

HTML5INTRODUCESNEWINPUTTYPESTENHANCEUSEREXPERIENCE、SIMPRIYIFYDEVELOPMENT、およびIMPROVEACCESSIBILITY.1）自動的にEmailformat.2）FOTIMIZENUMIMERICYPAD.3）およびSimplifyDateAndtimeInputs、reducingEdeDateDateRutedolutution。

H5の理解：意味と重要性May 11, 2025 am 12:19 AM

H5はHTML5、HTMLの5番目のバージョンです。 HTML5は、Webページの表現力と相互作用を向上させ、セマンティックタグ、マルチメディアサポート、オフラインストレージ、キャンバス描画などの新しい機能を導入し、Webテクノロジーの開発を促進します。

H5：アクセシビリティとWeb標準のコンプライアンスMay 10, 2025 am 12:21 AM

ネットワーク標準へのアクセシビリティとコンプライアンスは、Webサイトにとって不可欠です。 1）アクセシビリティは、すべてのユーザーがウェブサイトに平等にアクセスできるようにします。2）ネットワーク標準は、ウェブサイトのアクセシビリティと一貫性を改善するために続きます。3）アクセシビリティには、セマンティックHTML、キーボードナビゲーション、色コントラスト、代替テキストの使用が必要です。

HTMLのH5タグは何ですか？May 09, 2025 am 12:11 AM

HTMLのH5タグは、小さいタイトルまたはサブタイトルのタグを付けるために使用される5番目のタイトルです。 1）H5タグは、コンテンツの階層を改良し、読みやすさとSEOを改善するのに役立ちます。 2）CSSと組み合わせて、スタイルをカスタマイズして視覚効果を強化できます。 3）H5タグを合理的に使用して、乱用を避け、論理コンテンツ構造を確保します。

H5コード：Web構造に関する初心者向けガイドMay 08, 2025 am 12:15 AM

HTML5にWebサイトを構築する方法には、次のものが含まれます。1。セマンティックタグを使用して、などのWebページ構造を定義します。 2。マルチメディアコンテンツ、使用、タグを埋め込みます。 3.フォーム検証やローカルストレージなどの高度な機能を適用します。これらの手順を通じて、明確な構造と豊富な機能を備えた最新のWebページを作成できます。

H5コード構造：読みやすさのためのコンテンツの整理May 07, 2025 am 12:06 AM

合理的なH5コード構造により、ページは多くのコンテンツの中で際立っています。 1）コンテンツなどのセマンティックラベルを使用して、構造を明確にするためにコンテンツを整理します。 2）FlexBoxやグリッドなどのCSSレイアウトを介して、さまざまなデバイスでのページのレンダリング効果を制御します。 3）レスポンシブデザインを実装して、ページがさまざまな画面サイズに適応するようにします。

H5対古いHTMLバージョン：比較May 06, 2025 am 12:09 AM

HTML5（H5）以降のバージョンのHTMLの主な違いには、次のものが含まれます。1）H5はセマンティックタグを導入し、2）マルチメディアコンテンツをサポートし、3）オフラインストレージ機能を提供します。 H5は、新しいタグやタグなどのAPIを介してWebページの機能と表現力を高め、ユーザーエクスペリエンスやSEO効果を改善しますが、互換性の問題に注意を払う必要があります。

H5対HTML5：用語と関係を明確にするMay 05, 2025 am 12:02 AM

H5とHTML5の違いは次のとおりです。1）HTML5は、構造とコンテンツを定義するWebページ標準です。 2）H5は、迅速な開発とマーケティングに適したHTML5に基づくモバイルWebアプリケーションです。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

WebStorm Mac版

便利なJavaScript開発ツール

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。