ホームページ > 記事 > ウェブフロントエンド > CSS を使用して、マウスが div ブロックに移動したときに自動的に影効果を追加するにはどうすればよいですか?
CSS を使用して、マウスが div ブロックに移動したときに自動的に影効果を追加するにはどうすればよいですか?
- 藏色散人オリジナル
- 2018-08-10 16:04:0412688ブラウズ
主要なウェブサイトを閲覧する際、写真をクリックすると拡大や回転などの特殊効果が生じる場合があります。この効果は確かに人々の目を明るくすることができ、ユーザーのクリックにトラフィックをもたらす可能性もあります。もちろん、強力な CSS 機能はこのような特殊効果に限定されません。この記事では、よりクールな特殊効果を紹介します。これは、マウスが div ブロック内に移動したときに生成される CSS シャドウ効果で、すぐに立体感を生み出すことができます。
CSS シャドウ効果の具体的なコード例は次のとおりです:
<style>
.shadow{
float:left;
margin-left:20px;
background: #EEFF99;
width:200px;
height:400px;
}
.shadow:hover{
-webkit-box-shadow: #ccc 0px 10px 10px;
-moz-box-shadow: #ccc 0px 10px 10px;
box-shadow: #ccc 0px 10px 10px; }
</style>
</head>
<body>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
</body>上記のコード テスト効果 CSS シャドウ ボーダーは以下のとおりです:
注: その要素にシャドウを追加しても、 :hover 擬似クラスは切り離せない重要な属性です。
:hover 擬似クラスは、マウスがこの要素の上に移動したときに、この要素に特別なスタイルを追加します。このホバーの使い方をマスターしていれば、div ブロックや画像に影を追加する場合でも、この効果を簡単に実現できます。
この疑似クラスは、「ホバー状態」で要素を適用するために使用されます。ホバーは、ユーザーが要素を指定してもアクティブ化しない場合として定義されます。この最も一般的な例は、HTML ドキュメント内のハイパーリンクの範囲内でマウス ポインタを移動することです。理論的には、他の要素をホバーすることもできますが、CSS はどの要素をホバーするかを定義しません。
【関連コンテンツのおすすめ】
CSSを使ってページ上で写真に立体感を持たせるにはどうすればよいですか？（コード実際のテスト）
以上がCSS を使用して、マウスが div ブロックに移動したときに自動的に影効果を追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。