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 で入力ボックスに純粋な数字のみを入力するように制限する方法
推薦する
MySQLのビューの詳細な説明
ビュー： MySQL のビューはテーブルと多くの類似点があります。ビューも複数のフィールドと複数のレ...
Vue で円形プログレスバーを実装する例
データ表示は、常にあらゆる職業の人々が求めているものです。特にフロントエンド開発業界では、データを表...
React Hook の使用例 (一般的なフック 6 つ)
1. useState: 関数コンポーネントに状態を持たせる使用例: // カウンター impor...
MySQLで時間別データと最後の時間別データの差をクエリするアイデアの詳細な説明
1. はじめに要件は、特定の時間範囲内で、1 時間ごとのデータと前の 1 時間ごとのデータの差と比率...
Vue における LocalStorage と SessionStorage の違いと使い方
目次LocalStorageとはSessionStorageとはLocalStorage と Ses...
React 高階コンポーネント HOC 使用方法の概要
HOCを紹介する一文高階コンポーネント (HOC) とは何ですか? 公式ドキュメントによると、「高階...
ECMAScript6 におけるマップマッピングの基本概念と一般的な方法
目次マッピングとは何かオブジェクトとマップの違いマップの共通メソッド宣言と初期化割り当てセットキー値...
MySQL 5.x 以降を使用している場合のエラー #1929 列 ''createtime'' の日付時刻値が正しくありません: '''' の簡単な解決方法
MySQL をインストールした後、テーブル データを保存および削除しようとすると、常にエラー メッセ...
CSS3 メディアクエリにおけるデバイス幅と幅の違いの詳細な説明
1.デバイス幅定義: 出力デバイスの画面表示幅を定義します。 Web ページが Safari で開か...
MySQL の最適化: InnoDB の最適化
勉強の計画は簡単に中断され、継続するのが困難です。先日、社内で事業の方向性を調整するための会議があり...
JavaScript サンドボックスの探索
目次1. シナリオ2. サンドボックスの基本機能3. iframeの実装4. Webワーカーの実装5...
LinuxにNginxをインストールする正しい手順
序文私のように、Java バックエンドに勤勉な人であれば、多数のプロジェクト機能を実装することに加え...
Nginx と GeoIP モジュールを使用して IP の地域情報を読み取る方法
LinuxにGeoIPをインストールする yum で nginx-module-geoip をインス...
Vueはページdivボックスのドラッグアンドドロップソート機能を実装します
vue は、ページ上の div ボックスのドラッグ アンド ドロップ ソート機能を実装します。 序文...
ウェブページでグレーまたはブラックモードを実現するための CSS3 フィルターコード
フロントエンドcss3 フィルターは、Web ページのグレー効果を実現できるだけでなく、ナイト モー...