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 で入力ボックスに純粋な数字のみを入力するように制限する方法
推薦する
HTML スタイル タグと関連する CSS リファレンスの詳細な説明
HTML スタイル タグスタイルタグ - ドキュメント内でスタイルを宣言するときにこのタグを使用しま...
dockerプライベート倉庫の構築と利用の詳細説明
1. リポジトリイメージをダウンロードする docker プルレジストリ 2. プライベートウェアハ...
角度コンテンツ投影の詳細な説明
目次単一コンテンツ投影マルチコンテンツ投影単一条件のコンテンツ投影アプリ-人物-htmlアプリ担当者...
Windows オペレーティング システムでポートの使用状況を照会およびクリアするプログラム
Windowsオペレーティングシステムでは、ポートの占有状況を照会し、ポートの占有状況をクリアするプ...
vue $http の get および post リクエストのクロスドメイン問題を解決する
Vue $http get および post リクエストのクロスドメイン問題まずconfig/ind...
Mybatis での動的 SQL ステートメント分析
この記事は主にMybatisでの動的SQL文の解析について紹介します。この記事のサンプルコードは非常...
プライベートレジストリ内の画像を照会または取得する方法
Dockerはプライベートレジストリ内のイメージを照会または取得するために、 docker 検索 1...
Nginx+Keepalived でデュアルマシン マスターとバックアップを実装する方法
序文まず、高性能サーバーの高可用性またはホットスタンバイソリューションである Keepalived ...
Dockerカスタムネットワークの詳細な紹介
目次Dockerカスタムネットワーク1. カスタムネットワークの紹介2. カスタムネットワークを作成...
トランジションコンポーネントのアニメーション効果を使用した Vue サンプルコード
トランジションドキュメントアドレスは、フェードインとフェードアウト効果を実現するための背景ポップアッ...
テーブルを作成するための HTML dl、dt、dd タグとテーブル作成テーブル
ウェブサイトの開発とメンテナンスのコストが削減されるだけでなく、コードもよりセマンティックになります...
HTMLでカスタムタグを使用する方法
カスタム タグは XML ファイルと HTML ファイルで自由に使用できますが、いくつか注意すべき点...
HTML 固定タイトル列、タイトル ヘッダー テーブル固有の実装コード
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
2015-2016年に主流となるインタラクティブ体験のトレンド
5月の最も重要なインタラクティブデザイン記事！今年、Baiduのデザイナーは体験の観点から出発し、大...
MySQLサーバーは--read-onlyオプションで実行されているため、このステートメントを実行できません
会議中に同僚から開発ライブラリを書き込めないとの報告を受けました。エラー メッセージは次のとおりでし...