Pure CSS3はdivの出入りを順番に実現します
|
この記事は主に、純粋な CSS3 を使用して div が順番に出入りする効果を紹介します。一定の参考値があります。ご興味があれば、さらに詳しく知ることができます。 効果：
ソースコード:
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<タイトル></タイトル>
<スタイル タイプ="text/css">
div{
上マージン: 10px;
高さ: 50px;
背景色: #FF0000;
不透明度: 0.6;
}
.a{
アニメーション: aa 2s 線形 100ms 無限;
}
.b{
アニメーション: bb 2s 線形無限
}
.c{
アニメーション: cc 2s リニア 無限
}
.d{
アニメーション:dd 2s 線形無限
}
@キーフレーム aa{
0%{幅: 0;}
25%{幅:200px;}
50%{幅:200px;}
75%{幅:200px;}
100%{幅:200px;}
}
@キーフレーム bb{
0%{幅: 0;}
25%{幅:0px;}
50%{幅:200px;}
75%{幅:200px;}
100%{幅:200px;}
}
@キーフレームcc{
0%{幅: 0;}
25%{幅:0px;}
50%{幅:0px;}
75%{幅:200px;}
100%{幅:200px;}
}
@キーフレームdd{
0%{幅: 0;}
25%{幅:0px;}
50%{幅:0px;}
75%{幅:0px;}
100%{幅:200px;}
}
</スタイル>
</head>
<本文>
<div class="a">
</div>
<div class="b">
</div>
<div class="c">
</div>
<div class="d">
</div>
</本文>
</html>純粋な CSS3 を使用して、div が順番に出入りする効果を実現する方法について説明したこの記事はこれで終わりです。CSS3 div が順番に出入りする効果に関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続きご覧ください。今後も 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: レスポンシブなカードホバー効果を実現するための HTML+CSS
推薦する
Dockerコンテナでユーザーを分離する方法
前回の記事「Docker コンテナの UID と GID を理解する」では、Docker コンテナ内...
JS はデータ URL をどのように理解するのでしょうか?
目次概要データ URL の使用を開始するデータURL構文複数言語の文字列のBase64エンコードとデ...
Redhat 7.3 に MySQL 8.0.22 をインストールするための詳細なチュートリアル (バイナリ インストール)
目次1. MySQLインストールパッケージをダウンロードする2. MySQLのアンインストール手順3...
CSS でマウスの位置をマッピングし、マウスを動かしてページ要素を制御する (サンプル コード)
マウスの位置をマッピングしたり、ドラッグ効果を実装したりすることは、 JavaScriptで行うこと...
Ubuntu システムにおけるネットワーク構成ファイルの分析と説明
今日は奇妙なネットワーク問題に遭遇しました。調査プロセスといくつかの構成状況を記録し、Linux で...
div の水平レイアウトを両側に揃える 3 つの方法
この記事では、主に、div の水平レイアウトの両側の配置を実装する 3 つの方法を紹介し、それらを共...
fullpage.js フルスクリーンスクロールの具体的な使い方
1.fullpage.js ダウンロードアドレスhttps://github.com/alvarot...
NodeJs の高メモリ使用量のトラブルシューティング実戦記録
序文これは、オンライン コンテナーの拡張によって発生した調査です。最終的には、実際の OOM が原因...
知らないかもしれないLinuxのファイル権限管理方法
なぜ権限管理が必要なのでしょうか? 1. コンピュータ リソースは限られているため、コンピュータ リ...
システムエラー 1067 を解決するための MySQL データベース グリーン バージョンのインストール チュートリアル
ソフトウェアのグリーンバージョンとインストールバージョンの違いは何ですか?通常、ファイルのインストー...
MySQL で MHA アーキテクチャのデプロイメントを構築する手順
目次マハ1. MAHアーキテクチャの概要2. 適用可能なシナリオ3. MHAの動作原理4. MHAの...
JS オブジェクトのコピー (ディープ コピーとシャロー コピー)
目次1. 浅いコピー1. Object.assign(ターゲット、ソース、ソース...) 2. スプ...
HTML で Web ページに動的な時計を書く
HTML を使用して動的な Web クロックを作成します。コードは次のとおりです。 <!DOC...
MySQL でよく使われる連結文のまとめ
はじめに: MySQL では、CONCAT() 関数を使用して複数の文字列を 1 つの文字列に連結し...
表示しているページのスナップショットを Baidu が保存できないように設定する方法
今日、Baidu でページを検索したところ、ページが削除されていたため、当然 Baidu スナップシ...