この記事の内容は、ボタンを切り替えるときに背景のホバーアニメーション効果を実現するための純粋な CSS の使用方法についてです。必要な方は参考にしていただければ幸いです。
エフェクトプレビュー
ソースコードダウンロード
https://github.com/comehope/front-end-daily-challenges
コード解釈
domを定義、ナビゲーションには順序なしリストが含まれており、リストがありますは、次のリスト項目です:
<nav> <ul> <li>home</li> </ul> </nav>
中央に表示します:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: teal; }
リスト項目のフロントエンドのブートシンボルを非表示にします:
nav ul { padding: 0; list-style-type: none; }
ボタンコンテナのサイズを定義します:
:root { font-size: 10px; } nav li { width: 20rem; height: 7rem; }
テキストスタイルを設定します:
nav li { font-size: 20px; text-align: center; line-height: 7rem; font-family: sans-serif; text-transform: uppercase; letter-spacing: 1px; }
疑似要素を含む背景カラーブロックを2つ作成します:
nav li { position: relative; } nav li::before, nav li::after { content: ''; position: absolute; width: inherit; height: inherit; top: 0; left: 0; } nav li::before { background-color: white; z-index: -1; } nav li::after { background-color: goldenrod; z-index: -2; }
後ろの背景ブロックを右下に移動し、手前の背景ブロックに影を落として立体感を高めます:
nav li::before { box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2); } nav li::after { transform: translate(1.5rem, 1.5rem); }
次に、ホバー効果を追加します。
イージング時間を設定すると、メイン要素と疑似要素の両方にイージング効果が適用されます:
nav li { transition: 0.3s; } nav li::before, nav li::after { transition: 0.3s; }
ホバーリングすると、2 つの背景カラー ブロックの色が交換されます:
nav li:hover::before { background-color: goldenrod; } nav li:hover::after { background-color: white; }
同時に、背景色後ろのブロックが左上に移動します まっすぐに移動すると、ボタン全体が右下に移動します:
nav li:hover { transform: translate(1.5rem, 1.5rem); } nav li:hover::after { transform: translate(-1.5rem, -1.5rem); }
同時に、ホバー時にテキストの色を変更します:
nav li:hover { color: white; }
さらにボタンをいくつか追加します:
<nav> <ul> <li>home</li> <li>products</li> <li>services</li> <li>contact</li> </ul> </nav>
最後に、ボタン間の間隔を広げます:
nav li { margin: 3rem; }
これで完了です。
関連する推奨事項:
純粋な CSS を使用して黒い Angry Bird を実装する方法 (コード付き)
以上が純粋な CSS を使用して、ボタンを切り替えるときに背景のホバー アニメーション効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

如何保留 hover 的状态?下面本篇文章给大家介绍一下不借助javascript保留hover状态的方法,希望对大家有所帮助!

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

在html中,可以使用width和height属性来设置button元素的大小,使用background-color属性来设置button元素的颜色,具体语法为“button{width:宽度值;height:高度值;background-color: 颜色值;}”。

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 中国語版
中国語版、とても使いやすい

EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
