ズームインとズームアウトの閉じるボタンを実現する CSS (サンプル コード)

ズームインとズームアウトの閉じるボタンを実現する CSS (サンプル コード)

この効果はブラウザ ページで最もよく見られます。まずは効果の画像をご覧ください。

上の図に示すように、CSS を使用して上記の 3 つのボタンを描画します。

<テンプレート>
  <div class="windowAction">
    <button class="min">ズームアウト</button>
    <button class="fullpage">拡大</button>
    <button class="close">閉じる</button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ() {
    戻る {
      flag_fullpageWebView: 1
    };
  }
};
</スクリプト>

<style lang="scss" スコープ>
.windowAction {
  上マージン: -5px;
  -webkit-app-region: ドラッグなし;
  最小幅: 70px;
  テキスト配置: 右;
  ボタン {
    &:ホバー{
      色: #a8aabd;
    }
  }
  .分{
    幅: 14px;
    高さ: 14px;
    背景色: 透明;
    フォントサイズ: 0;
    右マージン: 18px;
    位置: 相対的;
    色: #878896;
    &:後 {
      コンテンツ: "";
      幅: 100%;
      位置: 絶対;
      左: 0;
      下部: 0;
      下境界線: 2px 実線;
    }
  }
  .フルページ{
    幅: 16px;
    高さ: 16px;
    色: #878896;
    境界線: 2px 実線;
    背景色: 透明;
    フォントサイズ: 0;
    右マージン: 18px;
  }
  。近い {
    幅: 18px;
    高さ: 18px;
    フォントサイズ: 0;
    背景色: 透明;
    位置: 相対的;
    色: #878896;
    変換: 回転(45度) 移動(-2px, 2px);
    &:前に、
    &:後 {
      コンテンツ: "";
      位置: 絶対;
    }
    &:前に {
      幅: 100%;
      左: 0;
      上位: 50%;
      変換: translateY(-50%);
      上境界線: 2px 実線;
    }
    &:後 {
      高さ: 100%;
      左: 50%;
      上: 0;
      変換: translateX(-50%);
      左境界線: 2px 実線;
    }
  }
}
</スタイル>

要約する

上記は、エディターが導入したズームイン、ズームアウト、閉じるボタンの CSS 実装です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  MySQL ビューの原則分析

>>:  5分でDockerをインストールする詳細な手順

推薦する

Dockerコンテナのセルフスタートを実装する方法

コンテナの自動起動Docker は、コンテナが終了したとき、または Docker が再起動されたとき...

MySQL の innodb_flush_log_at_trx_commit と sync_binlog を区別する方法

2 つのパラメータ innodb_flush_log_at_trx_commit と sync_bi...

Windows10システムにMySQL 5.7.17をインストールする

オペレーティング システム win10 MySQL は、公式 Web サイトからダウンロードした 6...

2008 年の Web デザインにおける 10 の経験

<br />インターネットは絶えず変化しており、BusinessWeek.com は専門...

Docker を使用した Laravel アプリケーションのデプロイ例

この記事で使用されているPHPベースイメージはphp:7.3-apacheです。この記事の Lara...

HTML ウェブページ作成のための 8 つの強力なテクニック

<br />作業を簡単に完了できる Web ページ作成ツールは数多くありますが、HTML...

ベンダー プレフィックス: ブラウザ エンジン プレフィックスが必要なのはなぜですか?

ベンダープレフィックスとは何ですか?ベンダー プレフィックス - ブラウザー エンジン プレフィック...

vue N​​progress のプログレスバー機能を実装する際の一般的な問題

NProgress は、ページがジャンプしたときにブラウザの上部に表示される進行状況バーです。公式ウ...

JavaScript による Web ページ カルーセルの超詳細な実装

目次HTML ページの作成js部分の機能を実装する1. 左ボタンと右ボタン2. 小さな円を動的に生成...

iframe 適応サイズ実装コード

ページドメインの関係:メインページ a.html はドメイン A: www.jb51.net に属し...

MySQLオンラインログライブラリの移行例

最近の事例をお話ししましょう。オンライン Alibaba Cloud RDS 上のゲーム ログ ライ...

ElasticSearch と ElasticSearch-Head の Docker デプロイメントの実装

この記事では主にDockerを使ってElasticSearch:バージョン6.8.4をデプロイする方...

MySQLで大きなテーブルを正常に削除する方法の詳細な説明

序文テーブルを削除するには、無意識に思い浮かぶコマンドは、DROP TABLE "テーブル...

Centos7にGitLabサーバーをインストールして展開する方法

私はここでCentOS 7 64ビットシステムを使用しています。CentOS 64ビットシステムを試...

Web 開発 js 文字列連結プレースホルダーと conlose オブジェクト API の詳細な説明

目次プレースホルダーの置き換えコンソール印刷テーブル()ログ、情報、警告、エラーグループ()、グルー...