CSS3アニメーションを使用した簡単な指クリックアニメーションの実装例
|
この記事では主に、CSS3 アニメーションで簡単な指クリックアニメーションを実装する例を紹介し、皆さんと共有します。詳細は次のとおりです。 レンダリング
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0、最大スケール=1.0、ユーザースケーラブル=0" />
<title>CSS3 - アニメーションによるシンプルな指クリックアニメーション</title>
<スタイル>
.wrapper{位置:相対;オーバーフロー:非表示;幅:500px;高さ:500px;マージン:0自動;背景色:黒}
.circle{位置:絶対;左:50%;上:50%;余白:-70px 0 0 -46px;
背景: url("./circle.png") center center no-repeat;
幅:62px;高さ:62px;アニメーション:circleHide 1s easy infinite both}
.finger{background:url("./finger.png") center center no-repeat;width:100px;height:140px;margin:170px auto;animation:fingerHandle 1s easy infinite both}
@keyframes 指ハンドル{
0%{変換:なし}
70%{変換:スケール3d(.8,.8,.8)}
100%{変換:なし}
}
@keyframes 円非表示{
0%{不透明度:0;変換:スケール3d(0,0,0)}
70%{不透明度:1;変換:scale3d(1.2,1.2,1.2)}
100%{不透明度:0;変換:scale3d(0,0,0)}
}
</スタイル>
</head>
<本文>
<div class="wrapper">
<div class="circle"></div>
<div class="指"></div>
</div>
</本文>
</html>これで、CSS3 のアニメーションを使用してシンプルな指クリック アニメーションを実装する例に関するこの記事は終了です。CSS3 指クリック アニメーションに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: HTML で入力ボックスに純粋な数字のみを入力するように制限する方法
![入力[type=file]の起動が遅くて動かなくなる問題を素早く解決します](/upload/images/67cac06ea7027.webp)
推薦する
Vue+SpringBoot のフロントエンドとバックエンドの分離におけるクロスドメインの問題
フロントエンドとバックエンドを分離した開発では、フロントエンドがバックエンドの API を呼び出して...
HTML マウス CSS コントロール
一般的に、マウスは上向きの斜め矢印として表示され、テキストの上に移動すると垂直線になり、ハイパーリン...
.html、.htm、.shtml、.shtm の違いと関連性について簡単に説明します。
ご存知のとおり、私たちが毎日閲覧する Web ページ、Web サイト、または Web ページには独自...
モバイルデバイス Web 開発における HTML ヘッドの書き方
コードをコピーコードは次のとおりです。 <ヘッド> <meta http-equi...
Vue のキーボードイベント監視の概要
キー修飾子キーボード イベントをリッスンする場合、詳細なキーを確認する必要があることがよくあります。...
js に基づいて大きなファイルのアップロードとブレークポイントの再開を管理する方法
目次序文フロントエンド構造バックエンド構造（ノード+エクスプレス） FormDataに基づくファイル...
JSでHTML本文のスタイルを変更する
目次1. 本来の定義2. JS操作、幅の変更を例に3. 効果: 幅が変更されました 1. 本来の定義...
v-model 双方向バインディングデータを実装する vue カスタム コンポーネントのサンプル コード
プロジェクトでは、プロジェクトが呼び出すカスタム パブリック コンポーネントに遭遇します。通常、pr...
offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft などのプロパティの図。
注 1: 上の画像の背景全体がこの Web ページのフルサイズであり、中央の小さなボックスがブラウザ...
クールなネオンライト効果を実現する純粋な CSS (デモ付き)
私は最近、YouTube の CSS アニメーション効果チュートリアル シリーズをフォローしています...
SQL効率を分析する方法を説明する
Explain コマンドは、データベースのパフォーマンス問題を解決するために最初に推奨されるコマンド...
Vue ユニットテストに関する予備調査
目次序文なぜユニットテストを導入するのですか?ユニットテストの概要テスト開発パターン1. テスト駆動...
XHTMLにおけるH1タグの位置について
最近、H1 については多くの議論が行われていますが (記事のコンテンツ ページ内)、おおよそ 2 つ...
Tomcatc3p0 で jnid データ ソースを構成する 2 つの実装方法の分析
c3p0の使用c3p0jarパッケージをインポートする <!-- https://mvnrep...
CSS3でシャトル星空のアニメーションを実現
結果： html <canvas id="スターフィールド"><...