不用JavaScript，純CSS3 實現可縮放的彈出式全屏菜單，支持多終端屏幕
上一篇《不用table僅用div標籤，利用CSS3的Flexbox屬性，實現跨行和跨列的表格或網格》,講解並演示了CSS的flexbox屬性，利用div實...
上一篇《不用JavaScript，純CSS3 實現可縮放的彈出式全屏菜單，支持多終端屏幕》
本篇文章講解一個利用CSS3的 :target 選擇器來實現模態彈出窗口，同樣地，我們在實現這個功能時使用的是純CSS3，完全不用JavaScript，也同樣能自動適應 PC終端/手機終端 等多種終端。
先看一下什麼是 :target選擇器。URL 帶有後面跟有錨名稱 #，指向文檔內某個具體的元素。這個被鏈接的元素就是目標元素(target element)。:target 選擇器可用於選取當前活動的目標元素。
好了，就說這些，現在上代碼。（也可訪問：http://www.ikinsoft.com/3ddemo/modal.html 查看實際效果）。
CSS代碼：
HTML代碼：
效果圖：
相關推薦
推薦中...