CSS點擊頁面切換特效,是當前網頁設計中常見的一種特效。它利用CSS實現頁面間平滑的過渡效果,增加網頁的美觀性和交互性。下面我們介紹其實現方法:
/*首先定義需要過渡效果的兩個頁面,用不同的class區分*/ .page1{ opacity: 1; transition: opacity 1s ease-in-out; } .page2{ opacity: 0; transition: opacity 1s ease-in-out; } /*接著定義點擊事件的CSS*/ .click-btn{ cursor: pointer; } /*利用JS切換頁面*/ $('.click-btn').on('click', function(){ $('.page1').toggleClass('page2'); $('.page2').toggleClass('page1'); });
上述代碼使用了CSS3中的transition屬性,可以實現平滑的過渡效果;同時利用JS切換兩個頁面的class,便可以實現頁面切換的效果。CSS點擊頁面切換特效簡單易用,可以幫助網頁設計師實現更具有視覺沖擊力的設計效果。