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
推薦する
CSS における XHTML タグの対応する属性と使用法
XHTML CSS を使って Web ページをデザインし始めた頃は、タグの使用経験も少なく、あまり気...
MySQL 5.6 マスタースレーブエラー報告の実践記録
1. 問題の症状バージョン: MySQL 5.6、従来の binlog ファイルと pos 方式を使...
Linux の grep コマンドと egrep コマンドの詳細な説明
反復/egrep構文: grep [-cinvABC] 'word' ファイル名-c...
MySQLインスタンスクラッシュ事例の詳細な分析
[問題の説明]私たちの実稼働環境には、複数の MySQL サーバー (MySQL 5.6.21) の...
一般的なメールボックスで正常に表示できる HTML メールを作成するためのヒント
HTML メールを送信するためのヒント: スタイルを使用してインライン CSS を記述する、使用する...
centos7.2 オフラインインストール mysql5.7.18.tar.gz
ネットワークが分離されているため、MySQL は yum を使用してインストールできません。ここでは...
MySQLアカウントのIP制限条件を変更する方法
序文最近、仕事で、MySQL ユーザーの権限を変更するには、特定の IP アドレスへのアクセスを制限...
Tomcat で server.xml と content.xml を変更した後の自動復元の問題の解決方法
設定ファイルを server.xml と content.xml に書き込みます。サーバーを再起動す...
Windows10システムにスーパーセットをインストールする手順
Superset は、エレガントなインターフェースとデータ テーブルに基づく動的なデータ生成を主な機...
Centos6.5 でのスーパーバイザーのアップグレード、インストール、および構成に関するチュートリアル
スーパーバイザー紹介Supervisor は、Python で開発されたクライアント/サーバー サー...
vue-qr を使用して Vue の QR コードを生成する方法について深く理解する
目次npm ダウンロードステップ（１）輸入（２）vue-qrパラメータ例要約する「QRコード」の英語...
Javascript のスコープとクロージャの詳細
目次1. 範囲2. スコープチェーン3. 語彙の範囲5. 閉鎖の適用6. クロージャの欠陥7. 閉会...
MySQLデータ復旧のさまざまな方法の概要
目次1. はじめに2. 直接回復2.1 mysqldumpバックアップの完全リカバリ2.2 xtra...
Centos7 で yum を使用して Mysql5.7.19 をインストールする詳細な手順
Centos7 の yum ソースには、mysql の代わりに mariaDB が使用されているため...
Vue でのルーティングパラメータの受け渡しとクロスコンポーネントパラメータの受け渡しの詳細な説明
ルートジャンプ this.$router.push('/course'); this...