要素(背景画像)の下に水平線アニメーションを実現するための純粋な CSS

要素(背景画像)の下に水平線アニメーションを実現するための純粋な CSS

効果画像:

html:

<div class='site_bar'>ホーム</div>
css:
.サイトバー{
  背景画像: 線形グラデーション(赤、赤);
  背景位置: 中央下;
  背景サイズ: 0 2px;
  background-repeat : no-repeat; //この属性は欠落できません。
  遷移: .3秒;
}
.site_bar:hover{
  背景サイズ: 100% 2px;
}

要約する

上記は、エディターが導入した要素の下の水平線アニメーション(背景画像)の純粋な CSS 実装です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  win10 で mysql8.0.23 をインストールし、「サービスが制御機能に応答しません」という問題を解決する方法

>>:  JavaScript が Jingdong の虫眼鏡効果を模倣

推薦する

CSS の overflow: hidden の使い方 (オーバーフローの非表示とフロートのクリア)

オーバーフロー非表示指定された高さを超えるテキストや画像情報を非表示にすることを意味します。 <...

Linux でファイルプレフィックスを一括で追加する方法

フォルダー内のすべての txt ファイルのファイル名の前に「gt_」を追加する必要があります。つまり...

Docker で Spring-boot プロジェクトをデプロイするためのサンプル コード

1. 基本的な Spring-boot クイックスタート1.1 クイックスタート pom.xml は...

Xftp のダウンロードとインストールのチュートリアル (グラフィック チュートリアル)

Windows と Linux 間でファイルを転送する場合は、Xftp ツールを使用できます。この...

Dockerを使用してシンプルなJava開発およびコンパイル環境を構築する方法の詳細な説明

Java 言語には多くのバージョンがあります。一般的に使用されている Java 8 に加えて、一部の...

Baidu デッドリンクファイルを作成する方法

Baidu によって定義されているデッドリンク形式には 2 種類あります。 1: XML形式のデッド...

VMware15 仮想マシン ブリッジ モードでインターネットにアクセスできない問題の解決方法

説明 ソリューションVMware 15 仮想マシン ブリッジ モードではインターネットにアクセスでき...

Js でオブジェクトのディープ オブジェクトを安全に取得するメソッドの例

目次序文文章パラメータ例Lodash 実装:トーキー機能: castPath関数: stringTo...

レイアウトサイズを変更するために左右にドラッグする純粋なCSS

ブラウザの非overflow:auto要素resize伸縮機能を利用して、JavaScript を使...

Linux のファイル圧縮とパッケージ化の概要

1. 圧縮と包装の概要一般的な圧縮ファイルウィンドウズ .rar .zip .7z Linux .z...

Linux クラウド サーバーに新しいディスクをマウントする方法

背景社内に新しいサーバーが追加され、2Tのハードディスクがマウントされました。sshでログイン後、マ...

FlashFXP FTP クライアント ソフトウェア登録クラッキング方法

FlashFXPのダウンロードアドレスは、https://www.jb51.net/softs/95...

vscode を使用したリモート Linux 開発の実装

過去に別れを告げるvscode にリモート SSH が導入される前は、Linux サーバー開発者の多...

CSS で background-color を使用して背景画像にマスク効果を追加する 2 つの方法

div で background-color と background-image を同時に設定する...