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 で入力ボックスに純粋な数字のみを入力するように制限する方法
推薦する
CCS におけるマージン: トップ崩壊問題を解決する
HTML 構造は次のとおりです。 CCS 構造は次のとおりです。 ページ効果図は次のとおりです。 こ...
MySQL 5.5.56 バージョン (バイナリ パッケージ インストール) カスタム インストール パス ステップ レコード
インストールパス: /application/mysql-5.5.56 1. 事前準備MySQL 依...
CSS3 でのシンプルな LED デジタル時計の実装方法
これは多くの人がやったことがあるはずです。ただうずうずして書きたかったので、時間をかけていじってダー...
Nginx は高可用性クラスタ構築を実装します (Keepalived+Haproxy+Nginx)
1. コンポーネントと実装機能Keepalived: Haproxy サービスの高可用性を実現し、...
HttpとHttpsの両方をサポートするNginxの詳細な設定
最近の Web サイトでは Https をサポートすることがほぼ標準機能となっており、Nginx は...
Vueは動的コンポーネントを使用してTAB切り替え効果を実現します
目次問題の説明Vueの動的コンポーネントとはアプリケーションシナリオの説明実装手順ステップ 1 (新...
VMWare12 グラフィックチュートリアルで Apple Mac OS X をインストールする
1. はじめに:友人はシステム知識を学びたいと考えており、Apple のラップトップを使用していまし...
zk+kafka+storm クラスターの docker-compose デプロイメントの実装
クラスターの展開の概要172.22.12.20 172.22.12.21 172.22.12.22 ...
MySQL オンラインリカバリ UNDO テーブルスペース 実戦記録
1 MySQL5.6 1.1 関連パラメータMySQL 5.6 では、innodb_undo_dir...
mysql データはどこに保存されますか?
MySQLデータベースの保存場所: 1. MySQLがMyISAMストレージエンジンを使用する場合...
JavaScript タイピングゲーム
この記事では、タイピングゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...
Vue-router プログラムナビゲーションの 2 つの実装コード
ページをナビゲートする2つの方法宣言型ナビゲーション: リンクをクリックしてナビゲーションを実現する...
マークアップ言語 - 印刷スタイルシート
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
CSS3 を使用して中心点の周りに要素を配置する方法の例
この記事では、CSS3 を使用して中心点を中心に要素をレイアウトする方法の例を紹介します。詳細は次の...
プライベートレジストリ内の画像を照会または取得する方法
Dockerはプライベートレジストリ内のイメージを照会または取得するために、 docker 検索 1...