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 リスト モデルでのマーカー タグの使用
この記事では主に、 list-itemの下にある::master疑似要素、 list-style-i...
MySQL マスタースレーブレプリケーションの役割と動作原理の詳細な説明
1. マスタースレーブレプリケーションとは何ですか?マスタースレーブレプリケーションは、スレーブデー...
Linux 編集の開始、停止、再起動の Springboot jar パッケージ スクリプトの例
序文springboot設定ファイルでは、設定ファイルの名前には独自の意味と用途があります。 dev...
Vue uniapp はセグメンター効果を実現します
この記事では、セグメンター効果を実現するためのvue uniappの具体的なコードを参考までに共有し...
ZooKeeper をベースにした Hadoop 高可用性クラスタの構築のチュートリアル図
目次1. 高可用性の概要1.1 可用性の高い全体アーキテクチャ1.2 QJMに基づく共有ストレージシ...
mysql における mydumper と mysqldump の比較
いくつかのテーブルまたは単一のデータベースのみをバックアップする場合は、innobackup よりも...
MySQLで日付を比較する方法の詳細な説明
データ型が datetime であるフィールド add_time を持つテーブル product が...
Win10でのJDKのインストールと環境変数の設定に関する詳細なチュートリアル
目次序文1. 準備2. インストール3. 環境変数を設定する1. 「新規」をクリックすると、ポップア...
Vueのメソッドとプロパティの詳細な説明
Vueのメソッドとプロパティ1. 方法使用法 1メソッド: {メソッド名: function(){}...
JavaScript カスタム カレンダー効果
この記事では、JavaScriptカスタムカレンダーエフェクトの具体的なコードを参考までに紹介します...
Linux での MySQL のアンインストールとインストールのグラフィック チュートリアル
ブログを書くのは初めてです。開発に携わって2年になります。仕事の後に何か有意義なことを見つけたいと思...
Linux で静的ルーティングを追加するための 2 つの実装方法の分析
ルートを追加するコマンド: 1.ルート追加route add -net 192.56.76.0 ne...
MySQL のインデックスの種類と基本的な使用例
目次索引- 総合索引- ユニークなインデックス- 主キーインデックス- 複合インデックス- 全文索引...
MySQL5.7+ MySQL Workbenchのインストールと設定方法のグラフィックチュートリアル（MAC）
この記事では、主にMACオペレーティングシステムでのMySQL5.7とMySQLWorkbenchの...
幅の比率に応じて高さを変えるCSSを実装するいくつかの方法
[解決策1: パディングの実装]原理：要素の padding の値がパーセンテージの場合、このパーセ...