HTML5とCSS3を使用してGoogle落書きアニメーションを完成させる方法
今日はcss3を使ってGoogle Doodleアニメーションを完成させる方法を紹介します。デモページの[スタート]ボタンをクリックすると、ページ上の人馬が動きます
ここで強調しておきたいのは、IEはCSS3のアニメーション属性をサポートしていないということです。邪悪な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 の基礎があまりしっかりしていない読者は、[スタート] ボタンがどのように配置されているのか疑問に思うかもしれません。位置属性を自分で読んで、Absolute の特定の役割を理解することができます。
以下は上記のHTMLとCSSコードで完成したページ効果です。
アニメーション効果の作成方法を紹介します。まず、さまざまな段階でのアニメーションの効果を指定するキーフレームを定義する必要があります。
horse-ride というキーフレームを作成しました。Chrome と Firefox の場合は、先頭に -webkit- または -moz- プレフィックスを追加する必要があります。 0% と 100% はそれぞれコードの始まりと終わりで、50% のアニメーション効果など、必要に応じて新しいケースを追加できます。
@-webkit-keyframes horse-ride {
% {background-position: 0 0;}
%
{background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
%
{background-position: 0 0;}
% {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 効果を参照する疑似クラスで、~ は #play_button の兄弟ノードを参照します。
次に、.horseに関するcss属性を紹介します。アニメーションでは、キーフレーム (上で定義した馬に乗る)、アニメーション間隔、アニメーション効果、実行回数を表す 4 つの値を使用します。次に、アニメーション遅延時間を介してアニメーション遅延時間を設定します。トランジションとbackground-positionを組み合わせて背景トランジションアニメーションを設定します。
最後に、[スタート]ボタンにアニメーション効果を追加します。
#play_button:checked ~#play_image img{
left:-68px;
-webkit-transition:
all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}
自分で開発してみることもできます。
関連記事:
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1660
14
1416
52
1310
25
1260
29
1233
24
H5ページの生産とはどういう意味ですか？
Apr 06, 2025 am 07:18 AM
H5ページの制作とは、HTML5、CSS3、JavaScriptなどのテクノロジーを使用したクロスプラットフォーム互換のWebページの作成を指します。そのコアは、ブラウザの解析コード、レンダリング構造、スタイル、インタラクティブ機能にあります。一般的なテクノロジーには、アニメーションエフェクト、レスポンシブデザイン、およびデータ相互作用が含まれます。エラーを回避するには、開発者をデバッグする必要があります。パフォーマンスの最適化とベストプラクティスには、画像形式の最適化、リクエスト削減、コード仕様などが含まれ、読み込み速度とコード品質を向上させます。
H5プロジェクトの実行方法
Apr 06, 2025 pm 12:21 PM
H5プロジェクトを実行するには、次の手順が必要です。Webサーバー、node.js、開発ツールなどの必要なツールのインストール。開発環境の構築、プロジェクトフォルダーの作成、プロジェクトの初期化、コードの書き込み。開発サーバーを起動し、コマンドラインを使用してコマンドを実行します。ブラウザでプロジェクトをプレビューし、開発サーバーURLを入力します。プロジェクトの公開、コードの最適化、プロジェクトの展開、Webサーバーの構成のセットアップ。
H5のクリックアイコンの作成方法
Apr 06, 2025 pm 12:15 PM
H5クリックアイコンを作成する手順には、次のものがあります。画像編集ソフトウェアで正方形のソース画像の準備が含まれます。 H5エディターにインタラクティブ性を追加し、クリックイベントを設定します。アイコン全体をカバーするホットスポットを作成します。ページにジャンプしたり、アニメーションのトリガーなど、クリックイベントのアクションを設定します。 HTML、CSS、およびJavaScriptファイルとしてH5ドキュメントをエクスポートします。エクスポートされたファイルをウェブサイトまたは他のプラットフォームに展開します。
H5でポップアップウィンドウの作り方
Apr 06, 2025 pm 12:12 PM
H5ポップアップウィンドウの作成手順：1。トリガー方法（クリック、時間、終了、スクロール）を決定します。 2。設計コンテンツ（タイトル、テキスト、アクションボタン）; 3。SETスタイル（サイズ、色、フォント、背景）; 4.コードを実装する（HTML、CSS、JavaScript）; 5。テストと展開。
H5はHTML5と同じですか？
Apr 08, 2025 am 12:16 AM
「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。
H5コード：アクセシビリティとセマンティックHTML
Apr 09, 2025 am 12:05 AM
H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。
H5は何を参照していますか？コンテキストの探索
Apr 12, 2025 am 12:03 AM
H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo
H5互換性の問題を解決する方法
Apr 06, 2025 pm 12:36 PM
H5互換性の問題のソリューションには、次のものが含まれます。Webページが画面サイズに応じてレイアウトを調整できるレスポンシブデザインを使用します。クロスブラウザーテストツールを使用して、リリース前に互換性をテストします。 PolyFillを使用して、古いブラウザの新しいAPIのサポートを提供します。 Web標準に従って、効果的なコードとベストプラクティスを使用します。 CSSプリプロセッサを使用して、CSSコードを簡素化し、可読性を向上させます。画像を最適化し、Webページのサイズを削減し、ロードをスピードアップします。 HTTPSがWebサイトのセキュリティを確保できるようにします。
