CSS を使用して、マウスが div ブロックに移動したときに自動的に影効果を追加するにはどうすればよいですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS を使用して、マウスが div ブロックに移動したときに自動的に影効果を追加するにはどうすればよいですか?

藏色散人

Aug 10, 2018 pm 04:04 PM

主要なウェブサイトを閲覧する際、写真をクリックすると拡大や回転などの特殊効果が生じる場合があります。この効果は確かに人々の目を明るくすることができ、ユーザーのクリックにトラフィックをもたらす可能性もあります。もちろん、強力な 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 シャドウボーダーは以下のとおりです:

CSS を使用して、マウスが div ブロックに移動したときに自動的に影効果を追加するにはどうすればよいですか?

注: その要素にシャドウを追加しても、 :hover 擬似クラスは切り離せない重要な属性です。

:hover 擬似クラスは、マウスがこの要素の上に移動したときに、この要素に特別なスタイルを追加します。このホバーの使い方をマスターしていれば、div ブロックや画像に影を追加する場合でも、この効果を簡単に実現できます。

この疑似クラスは、「ホバー状態」で要素を適用するために使用されます。ホバーは、ユーザーが要素を指定してもアクティブ化しない場合として定義されます。この最も一般的な例は、HTML ドキュメント内のハイパーリンクの範囲内でマウスポインタを移動することです。理論的には、他の要素をホバーすることもできますが、CSS はどの要素をホバーするかを定義しません。

HTML5による超高速3D立体写真アルバム切り替え効果

以上がCSS を使用して、マウスが div ブロックに移動したときに自動的に影効果を追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。