成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

純CSS 實現(xiàn) Lightbox 燈箱效果

xingpingz / 679人閱讀

摘要：為每一張圖片添加一個層，然后用樣式調(diào)教成看不出來。當(dāng)獲取到焦點(diǎn)的時候，就添加圖片放大的效果。用實現(xiàn)需要添加多個錨鏈接。這種用法網(wǎng)上有許多實例。

效果預(yù)覽：（有防盜鏈，麻煩手動復(fù)制到新窗口打開）

用偽類 :focus 實現(xiàn)：

https://ssl.huching.net/demo-...

用偽類 :target 實現(xiàn)：

https://ssl.huching.net/demo-...

(具體代碼可以直接在 demo 的源代碼里邊查看)

簡單說一下原理：

用 :focus 實現(xiàn)需要添加以添加 input 元素。因為 :focus 只對 input 有效。
為每一張圖片添加一個 input 層，然后用樣式調(diào)教成看不出來。當(dāng) input 獲取到焦點(diǎn)的時候，就添加圖片放大的效果。

用 :target 實現(xiàn)需要添加多個錨鏈接。這種用法網(wǎng)上有許多實例。

:focus 實現(xiàn)的缺點(diǎn)：

添加了一個 input，然后偽裝成普通元素，不夠純粹；

因為是獲取焦點(diǎn)，鼠標(biāo)右鍵也會觸發(fā)效果；

自定義不同的光標(biāo)樣式（cursor）會有延時；

:target 實現(xiàn)的缺點(diǎn)：

網(wǎng)址里邊有多個 #id ，有礙美觀，影響前進(jìn)后退；

沒法直接選擇 #close ，需要多次添加，不夠簡潔；

沒法直接點(diǎn)擊圖片還原；

鄙人總結(jié)了一些網(wǎng)上常見的偽類的妙用（ CSS Tab欄切換效果、CSS手風(fēng)琴效果 等），有興趣的可以看看：

http://huching.net/2016/11/cs...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50254.html

相關(guān)文章

  • 純CSS 實現(xiàn) Lightbox 燈箱效果

    摘要：為每一張圖片添加一個層，然后用樣式調(diào)教成看不出來。當(dāng)獲取到焦點(diǎn)的時候，就添加圖片放大的效果。用實現(xiàn)需要添加多個錨鏈接。這種用法網(wǎng)上有許多實例。 效果預(yù)覽：（有防盜鏈，麻煩手動復(fù)制到新窗口打開） 用偽類 :focus 實現(xiàn)： https://ssl.huching.net/demo-... 用偽類 :target 實現(xiàn)： https://ssl.huching.net/demo-... ...

    coordinate35 評論0 收藏0

  • 燈箱效果如何實現(xiàn) - W3Schools視頻06

    摘要：燈箱效果是將圖片放大彈出顯示，并將背景變暗，以突出圖片。燈箱效果教學(xué)燈箱效果例子視頻連結(jié)站燈箱效果實現(xiàn)燈箱效果的重點(diǎn)在于預(yù)設(shè)隱藏?zé)粝?。圖片放大的效果可透過動畫實現(xiàn)。 燈箱（Lightbox）效果是將圖片放大彈出顯示，并將背景變暗，以突出圖片。這種效果可用于單張圖片，也可用于圖片庫。其原理跟模態(tài)框（Modal）基本一樣。W3Schools有分Modal Images和Lightbox兩個...

    galaxy_robot 評論0 收藏0

  • 燈箱效果如何實現(xiàn) - W3Schools視頻06

    摘要：燈箱效果是將圖片放大彈出顯示，并將背景變暗，以突出圖片。燈箱效果教學(xué)燈箱效果例子視頻連結(jié)站燈箱效果實現(xiàn)燈箱效果的重點(diǎn)在于預(yù)設(shè)隱藏?zé)粝?。圖片放大的效果可透過動畫實現(xiàn)。 燈箱（Lightbox）效果是將圖片放大彈出顯示，并將背景變暗，以突出圖片。這種效果可用于單張圖片，也可用于圖片庫。其原理跟模態(tài)框（Modal）基本一樣。W3Schools有分Modal Images和Lightbox兩個...

    fasss 評論0 收藏0

  • 燈箱效果如何實現(xiàn) - W3Schools視頻06

    摘要：燈箱效果是將圖片放大彈出顯示，并將背景變暗，以突出圖片。燈箱效果教學(xué)燈箱效果例子視頻連結(jié)站燈箱效果實現(xiàn)燈箱效果的重點(diǎn)在于預(yù)設(shè)隱藏?zé)粝?。圖片放大的效果可透過動畫實現(xiàn)。 燈箱（Lightbox）效果是將圖片放大彈出顯示，并將背景變暗，以突出圖片。這種效果可用于單張圖片，也可用于圖片庫。其原理跟模態(tài)框（Modal）基本一樣。W3Schools有分Modal Images和Lightbox兩個...

    lvzishen 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<