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

推薦する

win10 での mysql 8.0.16 winx64 インストールの最新グラフィック チュートリアル

このデータベースをダウンロードするには、多くの時間とトラフィックがかかります。踏み込んだ落とし穴で時...

ページング効果を実装するミニプログラム

この記事の例では、ページング効果表示を実現するためのミニプログラムの具体的なコードを参考までに共有し...

MySQLのストレージエンジンの詳細な説明

MySQL ストレージ エンジンの概要ストレージ エンジンとは何ですか? MySQL のデータは、さ...

VueにおけるAxios非同期通信の詳細な説明

1. まず、インタラクティブに使用するための .json ファイルを作成します。json データ形式...

VMware Workstation のインストール Linux (Ubuntu) システム

システムをコンピューターにインストールする方法がわからない場合は、Linux を学習したい場合は、仮...

過去2年間のユーザーエクスペリエンス

<br />国内のウェブサイトが本格的に普及し、ユーザーエクスペリエンスに重点が置かれる...

VMware Workstation 仮想マシンのインストール操作方法

仮想マシンは非常に便利なテストソフトウェアです。ハードウェアに損傷を与えることなく、さまざまなテスト...

Linux 環境で crontab コマンドを使用して、スケジュールされた定期的な実行タスクを設定します (PHP 実行コードを含む)

この記事では、Linux 環境で crontab コマンドを使用して、タスクの定期的な実行をスケジュ...

Javascript ツリー メニュー (11 項目)

1. dhtmlxツリー dHTMLxTree は機能豊富なツリー メニュー コントロールです。豊...

Tomcatのデフォルトプログラム公開パスの使用と変更についての説明

tomcat7 のデフォルトのプログラム公開パスは tomcat/webapps/ROOT/ です。...

Linuxシステムにmsfをインストールするプロセスの詳細な説明

または、インストールプロセスを自分で書き留めてください。私のサーバーシステムはAliyun Linu...

バックエンド管理システムを構築するためのvue-element-adminの実装手順

最近、カンファレンスの健康申告システムに取り組んでいたとき、バックエンドを構築する必要があり、vue...

商品クエリ機能を実現するJavaScript

この記事の例では、商品検索機能を実現するためのJavaScriptの具体的なコードを参考までに共有し...

よく使われる HTML 形式のタグ_Powernode Java Academy

1. タイトルHTML では、<h1></h1> から <h6>...