純CSS3全螢幕響應式幻燈片特效

簡短教學

這是一款簡單使用純CSS3製作的酷炫全螢幕響應式投影片特效。這張投影片特效使用純CSS製作，沒有任何的js程式碼。

 使用方法

 HTML結構

此純CSS3全螢幕響應式投影片的HTML結構如下：

<div class="wrap">
  <header>   
    <label for="slide-1-trigger">Slide One</label>  
    <label for="slide-2-trigger">Slide Two</label>
    <label for="slide-3-trigger">Slide Three</label>
    <label for="slide-4-trigger">Slide Four</label>
  </header>
   
  <input id="slide-1-trigger" type="radio" name="slides" checked> 
  <section class="slide slide-one">
    <h1>Headline One</h1>
  </section>
 
  <input id="slide-2-trigger" type="radio" name="slides"> 
  <section class="slide slide-two">
    <h1>Headline Two</h1>
  </section>
 
  <input id="slide-3-trigger" type="radio" name="slides">
  <section class="slide slide-three">
    <h1>Headline Three</h1>
  </section>
 
  <input id="slide-4-trigger" type="radio" name="slides">
  <section class="slide slide-four">
    <h1>Headline Four</h1>
  </section>
</div>

 CSS樣式

該純CSS3全螢幕響應式圖片CSS3全螢幕響應式投影片特效的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！