要素（背景画像）の下に水平線アニメーションを実現するための純粋な 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 の虫眼鏡効果を模倣
推薦する
HTML <!--...--> コメントタグの役割の詳細な分析
多くのウェブサイトのソースコードを確認すると、多くのコメントが見つかります。特に、ソース文書にコメン...
Docker イメージ管理の一般的な操作コード例
ミラーリングも Docker のコアコンポーネントの 1 つです。ミラーリングはコンテナ操作の基盤で...
Mysql トランザクションで Update を実行するとテーブルがロックされますか?
2つのケース: 1. 索引あり 2. 索引なし前提条件:方法: コマンドラインを使用してシミュレー...
dockerでマウントされたディレクトリが読み書きできない問題を解決する
次のコマンドを使用してコンテナを作成し、ローカルの /home/dock/Downloads ディレ...
スローモーションアニメーション効果を実現するJavaScript
この記事では、スローモーションアニメーション効果を実現するためのJavaScriptの具体的なコード...
Vueはドラッグ可能なツリー構造図を実装します
目次Vue 再帰コンポーネントドラッグイベント最近、Vue を使用して、ドラッグ可能なツリー構造図と...
Vueの学習手順
目次1. v-text (v-instruction name = "variable&q...
CSS3 で transform を使用した場合のフォントぼかしの解決方法の詳細な説明
この質問は非常に奇妙なので、あまり多くを語らずにコードに直接進みます。 .g-ダイアログラッパー{ ...
CocosCreator スケルトンアニメーション ドラゴンボーン
CocosCreator バージョン 2.3.4ドラゴンボーンアニメーションキールアニメーションを ...
VUEは底部吸引ボタンを実装
この記事では、VUEの具体的なコードを共有して、下部吸引ボタンを実装する例を紹介します。具体的な内容...
CSS3 変換によって子要素の固定位置を絶対位置に変更する方法
この記事では、CSS3 の transform を使用して子要素の固定配置を絶対配置に変更する方法を...
mysql 5.7.5 m15 winx64.zip インストール チュートリアル
win7 64 ビットで mysql-5.7.5-m15-winx64 をインストールして構成する方...
カルーセル効果を実現するための純粋なjs
この記事では、カルーセルマップの効果を実現するためのjsの具体的なコードを参考までに共有します。具体...
Django+Mysql+Redis+Gunicorn+NginxのDockerデプロイメントの実装
I. はじめにDockerテクノロジーは現在非常に人気があります。コンテナを介してプロジェクト環境を...
localStorageの有効期限を設定するいくつかの方法
目次問題の説明1. 基本的な解決策2. 中間的な解決策3. 高度なソリューション4. ハードコアソリ...