純粋な CSS3 でモバイルの拡大と縮小の効果を実装するためのサンプル コード

純粋な CSS3 でモバイルの拡大と縮小の効果を実装するためのサンプル コード

この記事では、純粋な CSS3 を使用してモバイル端末での展開と折りたたみの効果を実装するサンプルコードを紹介し、共有します。詳細は次のとおりです。

表示効果:

HTMLコード

<セクションクラス="ブロック">
    <入力タイプ="チェックボックス">
    <div class="case-block">
      <div>展開</div>
      <div>折りたたむ</div>
    </div>
    <div class="詳細">
      <div>ジジジ、ジジジ、ムーランが窓のそばを歩きます。織機の音は聞こえず、あなたのため息だけが聞こえます。 (魏文通:魏)何を考えているのか、何を思い出しているのかを尋ねます。考えることも、思い出すことも何もない。昨晩、軍の命令書を見ました。カーンは兵士を募集していました。軍事関係の書籍が 12 巻あり、すべての巻に私の名前が載っていました。私の父には長男がいませんし、ムーランには兄がいません。私は馬と鞍を買って、これからは父のために戦うつもりです。 (聞いただけ:のみ)
      <div>東の市場で立派な馬を買い、西の市場で鞍を買い、南の市場で手綱を買い、北の市場で長い鞭を買います。私は朝に両親のもとを離れ、夕方まで黄河のそばにいました。両親が私を呼ぶ声は聞こえず、黄河の流れる音だけが聞こえました。私は朝に黄河を出発し、夕方に黒山に到着しました。両親が私を呼ぶ声は聞こえず、燕山から来た胡騎兵の叫び声だけが聞こえました。 </div>
      <div>飛ぶように山や丘を越えて、戦場まで何千マイルも旅します。金色の監視塔に冷たい空気が広がり、冷たい光が鉄の鎧を照らします。将軍は百戦して死に、戦士は十年後に帰還した。 </div>
      <div>帰国後、明堂に座っている皇帝に会った。功績により12名の昇進と数十万の報酬。カーンは彼女に何が欲しいのか尋ねました。ムーランは牧師にはなりたくなかったのですが、息子を故郷に送り届けるために千マイルも馬で旅をしたいと思っていました。 (別のバージョン:私は明るいラクダの千マイルの足を借りたい)</div>
      <div>両親は娘が来ると聞いて、助けるために町へ出かけました。姉は妹が来ると聞いて、化粧の準備をしました。弟は姉が来ると聞いて、豚や羊を殺すためにナイフを研ぎました。東の亭の扉を開け、西の亭のベッドに座り、戦時中のローブを脱いで古い服を着ます。窓際で髪をとかしながら、鏡の前で化粧をしている。彼女が仲間に会いに出かけると、彼らは皆驚いてこう言いました。「私たちは12年間一緒にいましたが、彼らはムーランが女の子だとは知りませんでした。」 (贴通:贴; 惊忙は惶とも書く; 惶火伴通: 伙)</div>
     <div>オスのウサギの足は混乱していて、メスのウサギの目はぼやけています。2匹のウサギが並んで歩いていますが、どちらがオスでどちらがメスかどうやって見分ければいいのでしょうか? </div>
    </div>
  </セクション>

CSSコード

@charset "UTF-8";

.タイトルブロック{
    高さ: 26px;
    テキスト配置: 中央;
}

。ブロック {
    ディスプレイ: -webkit-box;
    ディスプレイ: -ms-flexbox;
    ディスプレイ: フレックス;
    -webkit-box-orient: 垂直;
    -webkit-box-direction: 逆方向;
    -ms-flex-flow:列反転ナウラップ;
    flex-flow: 列反転 nowrap;
    幅: 360ピクセル;
    マージン: 0 自動;
    フォントサイズ: 14px;
    色: #4C4C4C;
    行の高さ: 28px;
    境界線: 1px 実線 #999;
    パディング: 10px;
}

.ブロック > .詳細 {
    最大高さ: 163px;
    下マージン: 10px;
    オーバーフロー: 非表示;
}

.block > .case-block {
    ディスプレイ: -webkit-box;
    ディスプレイ: -ms-flexbox;
    ディスプレイ: フレックス;
    -webkit-box-pack: 中央;
    -ms-flex-pack: 中央;
    コンテンツの中央揃え: 中央;
    -webkit-box-align: 中央;
    -ms-flex-align: 中央;
    アイテムの位置を中央揃えにします。
    幅: 120ピクセル;
    高さ: 24px;
    マージン: 0 自動 0;
    色: #0e0e0e;
    背景: #fff;
    境界線: 1px 実線 #0e0e0e;
    境界線の半径: 5px;
}

.block > .case-block div:nth-of-type(1) {
    表示: ブロック;
}

.block > .case-block div:nth-of-type(2) {
    表示: なし;
}

.block > [type="チェックボックス"] {
    位置: 相対的;
    表示: ブロック;
    幅: 120ピクセル;
    高さ: 24px;
    マージン: -24px 自動 0;
    zインデックス: 1000;
    不透明度: 0;
}

.block > [type="checkbox"]:hover + .case-block {
    背景色: #f5f5f5;
}

.block > [type="checkbox"]:checked + .case-block div:nth-of-type(1) {
    表示: なし;
}

.block > [type="checkbox"]:checked + .case-block div:nth-of-type(2) {
    表示: ブロック;
}

.block > [type="checkbox"]:checked + .case-block + .detail {
    最大高さ: 継承;
}

技術的なポイント:

  • CSS3 の柔軟なボックスレイアウト
  • CSS のリレーショナルセレクター
  • CSS の疑似クラスセレクター
  • CSS の属性セレクター

これで、純粋な CSS3 でモバイルの拡大と縮小効果を実装するためのサンプル コードに関するこの記事は終了です。CSS3 のモバイルの拡大と縮小効果の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  プロジェクトのフロントエンドとバックエンドでの Echart チャートの使用に関する詳細な説明

>>:  Nginx ベースの HTTPS ウェブサイトを設定する手順

推薦する

Docker を使用して Jenkins をインストールするためのサンプル コード

Dockerコンテナのインストール時に遭遇しやすい2つの問題1.ポートはすでに割り当てられています(...

MySQL における TIMESTAMPDIFF ケースの詳細な説明

1.構文TIMESTAMPDIFF(unit,begin,end); 単位に従って時間差を返します。...

Navicat for MySQL 11 登録コード\アクティベーションコードの概要

おすすめの読み物: Navicat12.1シリーズのクラッキングとアクティベーションのチュートリアル...

vue-element-admin グローバル読み込み待機中

最近の要件:グローバルロード、すべてのインターフェースはロード待機機能を表示するかどうかを手動で制御...

レスポンシブ Web デザインが価値のない 5 つの理由

この記事は Tom Ewer の Managewp ブログからのもので、現在人気のレスポンシブ デザ...

Windows 10 での MySQL 8.0.12 解凍バージョンのインストール グラフィック チュートリアル

この記事は、MySQL 8.0.12解凍版のインストールグラフィックチュートリアルを記録しています。...

Linux コマンドラインでパケットをキャプチャするために tcpdump を使用するいくつかの機能

tcpdump は、ネットワークの問題のトラブルシューティングに効果的に役立つ、柔軟で強力なパケット...

テーブルを作成するための HTML dl、dt、dd タグとテーブル作成テーブル

ウェブサイトの開発とメンテナンスのコストが削減されるだけでなく、コードもよりセマンティックになります...

MySQL に外部キー制約を追加する具体的な方法

このチュートリアルの動作環境: Windows 7 システム、MySQL 8 バージョン、Dell ...

MySQLデータクエリが多すぎるとOOMが発生するかどうかについての簡単な議論

目次サーバー層でのフルテーブルスキャンの影響InnoDB におけるフルテーブルスキャンの影響Inno...

Linux 環境の Apache で https サービスを有効にする方法の詳細な説明

この記事では、Linux 環境の Apache で https サービスを有効にする方法について説明...

Reactホームページの読み込みが遅い問題のパフォーマンス最適化事例の詳細な説明

しばらくReactを勉強した後、実践してみたいと思います。そこで、個人のブログのウェブサイトを再構築...

MySQL ページング分析の原理と効率改善

MySQL ページング分析の原理と効率改善PERCONA PERFORMANCE CONFERENC...

Linux システムに 3 つ以上の Tomcat をインストールする (詳細な手順)

複数のTomcatをインストールする場合は、システムにJDKがインストールされている必要があり、 T...

Linux システムで複数のバージョンの PHP を共存させるソリューション (超シンプル)

PHP7が出たので、最新バージョンのファンとしては、早速アップグレードして体験してみました。しかし...