動的な背景グラデーション効果を実現する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 テキスト折り返し問題について