首頁 > web前端 > css教學 > css怎麼實現滑鼠移到div塊時自動加上陰影效果?

css怎麼實現滑鼠移到div塊時自動加上陰影效果?

藏色散人
發布: 2018-08-10 16:04:04
原創
12804 人瀏覽過

我們在瀏覽各大網站時,點擊其中的圖片可能會出現放大或旋轉等等的特效。這種效果的確能讓人眼睛一亮,也可能帶來使用者點擊的流量。當然強大的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 偽類別就是在滑鼠移到元素上時向此元素新增特殊的樣式。只要你掌握了這個hover的使用方法,無論是給div塊還是圖片加陰影都可以輕鬆實現這樣的效果。

這個偽類別是應用處於「懸停狀態」的元素。懸停定義為使用者指示了一個元素但沒有將其啟動。對此最常見的例子是將滑鼠指標移到 HTML 文件中一個超連結的邊界範圍內。理論上,其他元素也可以處於懸停狀態,不過 CSS 沒有定義究竟是哪些元素。

【相關內容推薦】

在頁面中怎麼用css讓圖片有立體感的效果?(程式碼實測)

html5極速3D立體式圖片相簿切換效果


#

以上是css怎麼實現滑鼠移到div塊時自動加上陰影效果?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板