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
推薦する
W3C チュートリアル (11): W3C DOM アクティビティ
ドキュメント オブジェクト モデル (DOM) は、プログラムがドキュメントのコンテンツ、構造、およ...
Nginx プロキシを使用してインターネットを閲覧する方法
私は通常、Tomcatや他のアプリケーションのリバースプロキシとしてnginxを使用しています。実際...
1時間で学ぶMySQLの基礎
目次MySQL を使い始めるMySQL 管理6. MySQL サーバーを起動および停止します。 7....
Vue の DOM の非同期更新の簡単な分析
目次Vue が DOM を非同期更新する原理1 実際の DOM 要素を取得できるのはいつですか? 2...
Windows での MySQL の使用: 自動スケジュールバックアップの実装
1. バックアップスクリプトを書く 著者：www.yumi-info.com 日付:20171222...
基本的な HTML ディレクトリの問題 (相対パスと絶対パスの違い)
相対パス - ファイルを参照する Web ページの場所に基づいて確立されたディレクトリ パス。そのた...
MySql データベースのサブクエリと高度なアプリケーションの簡単な分析
MySql データベースのサブクエリ:サブクエリ: 選択クエリ ステートメント内に別の選択ステートメ...
Linux ディスク クォータ管理のグラフィカルな例
ディスク クォータは、コンピューター内の指定されたディスクのストレージ制限です。つまり、管理者はユー...
WebデザイナーがRetinaディスプレイデバイス向けの画像を作成する方法
特記事項:この記事は、Chris Spooner の英語記事「Web デザイン用の Retina グ...
MySQLデータベースの圧縮バージョンのインストールと設定に関する詳細なチュートリアル
目次1. MySQLをダウンロードする2. 圧縮パッケージを解凍する3. MySQLを初期化する4....
Linux の cut コマンドの説明
Linux や Unix の cut コマンドは、ファイルの各行から一部を切り取って標準出力に出力す...
アーティストの自己啓発におけるいくつかの経験
会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...
Mysql 5.6.37 winx64 インストール デュアル バージョン mysql ノート
マシンに MySQL バージョン 5.0 がすでに存在する場合は、最新バージョンの MySQL のイ...
vagrant+virtualBoxで仮想マシンを構築する方法
1. はじめにVagrant は、仮想マシン (VirtualBox) を構築および管理するためのツ...
2秒以内にHTMLページ内の他のページにリダイレクトする方法
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...