font

11月 17, 2016

用純CSS做出JS般的觸發效果!




CSS3之後,多了一個好用的東西 :target
加上:target的class屬性會在「被連結」的時候(包含id之下的屬性被href連到之後)才啟用。
寫法是這樣:



html寫法是這樣:


當包含了box屬性的物件 id="popup"被連到的時候,box:target的屬性就會被開啟。而被開啟之後,不想要的時候當然也可以關閉target,只要讓另一個物件被連到就行了。最簡單的寫法是寫一個關閉按鈕,href="#"。(可以說是偽連結吧?)


上面兩張圖例是我用了最簡化的語法寫的,沒有美化任何樣式,這樣最清楚哪些東西是必要的。以下是這語法實際範例:


知道這厲害之處了吧!
這好東西可以做出很多樣化、而且不需要JS的純CSS觸發!
唯一需要注意的就是上面說的連結target跟關閉target的方式。

接著給一個target極致一點的用法範例,是國外的,我直接轉貼:
這個用法用的就很淋漓盡致了~純CSS除了可以做出按X關掉的popup,其實同樣道理稍微換一下a的寫法,也可以變成點選背景關掉。超棒的這東西~~~





Related Posts Plugin for WordPress, Blogger...

ShareThis