動的な背景グラデーション効果を実現するCSS3

動的な背景グラデーション効果を実現するCSS3

CSS3 を学ぶということは、新しい機能と基本的な理論に慣れることを意味します。この記事では、ケース スタディを使用して CSS3 の理論的知識を理解し、開発効率を向上させるテクニックをいくつかまとめています。

このケースは(背景色のグラデーション)であり、CSS3 を使用すると背景色のグラデーションの効果を実現できます。

HTML部分:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title> グラデーション - スカイライン </title>
  <link rel="スタイルシート" type="text/css" href="style.css">
</head>
<本文>
   <div class="text">
      グラデーション - スカイライン</div>
</本文>
</html>

背景色のグラデーションを実現するために、HTML (構造) 部分で何もする必要はありません。表示効果を容易にするためのテキスト行を次に示します。

CSS部分:

体{
  マージン: 0;
  パディング: 0;
  フォントファミリー: "montserrat";
  背景画像: 線形グラデーション(125度,#E4FFCD,#6DD5FA,#2980B9,#E4FFCD); 背景サイズ: 400%;
  アニメーション: アニメーションを 15 秒無限に開始します。
}

。文章{
  色: 白;
  テキスト配置: 中央;
  テキスト変換:大文字;
  マージン: 400px 0;
  フォントサイズ: 22px;
}

@keyframes 開始タイミング {
  0%{
    背景位置: 0% 50%;
  }
  50%{
    背景位置: 100% 50%;
  }
  100%{
    背景位置: 0% 50%;
  }
}

要点:

内容の一部は以前言及されています(水の波紋):https://www.jb51.net/css/672226.html

background-image: linear-gradient();

linear-gradient() 関数は、線形グラデーション「イメージ」を作成するために使用されます。線形グラデーションを作成するには、グラデーションが移動する開始点と方向 (角度として指定) を設定する必要があります。終了色も定義する必要があります。終了色は、Gecko がスムーズに遷移する色であり、少なくとも 2 色を指定する必要がありますが、より複雑なグラデーション効果を作成するには、より多くの色を指定することもできます。

「125deg」はグラデーションの傾斜角度を設定するために使用されます。

background-position:

プロパティは背景画像の開始位置を設定します。

この壁紙のグラデーションも試すことができます:

背景:白;
背景画像: 線形グラデーション(90度,
                  rgba(200,0,0,.5) 50%、透明0)、
                  線形グラデーション( 
                  rgba(200,0,0,.5) 50%、透明0);
背景サイズ: 30px 30px;

要約する

上記は、背景の動的なグラデーション効果を実現するために私が紹介した CSS3 です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  クリーンで美しいウェブデザインのための4つの原則

>>:  IE ラベル LI テキスト折り返し問題について

推薦する

Nginx に lua-nginx-module モジュールをインストールする方法

ngx_lua_module は、lua パーサーを nginx に埋め込み、lua 言語で記述され...

ファイル共有サーバーを構築するための samba + OPENldap の詳細な説明

ここでは、samba (ファイル共有サービス) v4.9.1 + OPENldap (バックエンド ...

Robots.txtの詳細な紹介

robots.txt の基本的な紹介Robots.txt はプレーンテキスト ファイルであり、Web...

MySQL の結合フィールドの Concat()

目次1. はじめに2. 本文2.1 フィールドの連結2.2 フィールドでの算術計算の実行1. はじめ...

MySql8.0.19 インストールピットレコードを共有する

前回の記事ではMySql8.0.19のインストール手順を紹介しました。必要な方はクリックしてご覧くだ...

ドロップダウンメニューを実現するためのHTML+CSS

1. ドロップダウンリストの例コードは次のとおりです。 <!doctypehtml> ...

JavaScript オブジェクトを比較する 4 つの方法

目次序文参考比較手動比較浅い比較徹底比較要約する序文JavaScript でプリミティブ値を比較する...

MySQL のインデックスとビューの使用方法と違いの詳細な説明

序文この記事では主に、MySQL のインデックスとビューの使用方法と違いを紹介し、参考と学習のために...

Docker Compose で環境変数を参照する方法の例

プロジェクトでは、さまざまな条件や使用シナリオを制御するために、docker-compose.yml...

Centos7でglibcをアップグレードするとシステム異常(起動できない)になる場合の解決方法

目次問題の原因:解決:解決:私は Centos7 を使用しています (理論的にはこの方法は Cent...

行の高さと垂直方向の配置に関する包括的な理解

前の単語line-height、font-size、vertical-align は、インライン要素...

MySQL でよく使われる型変換関数の概要 (推奨)

1. Concat関数。よく使用される接続文字列: concat 関数。たとえば、SQLクエリ条件...

MySQL初心者のための基本操作のまとめ

図書館運営クエリ1.SHOW DATABASE; ----すべてのデータベースを照会する2. SHO...

JavaScript でツリー構造を構築するための効率的なアルゴリズムについての簡単な説明

目次導入アイデアID配列インデックスのマッピング関係を確立するツリー構造の構築原理要約する導入組織階...