HTML5とCSS3で実現出来るサンプルです

CSSで実装するスライドショー

• ＞＞CSSのみのスライドショー(1)

  コード見る

  

  
  

  クロスフェードで切り替わるスライドショーサンプルです。

  [ 閉じる ]

  htmlソース

  <div class="manual-slide1"> <img src="/images/manual-slider01-img01.jpg" alt="img"> <img src="/images/manual-slider01-img02.jpg" alt="img"> <img src="/images/manual-slider01-img03.jpg" alt="img"> </div>

  CSS

  .manual-slide1 { position: relative; } .manual-slide1 img { position: absolute; padding: 0; width: 420px; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; animation : slideshow1 10s linear infinite; } @keyframes slideshow1 { 0% { opacity: 0; } 28% { opacity: 1; } 50% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } }

  
  

• CSSで実装する手動スライドショー

  

  

  

  

  

• CSSで実装するスライドショー

  

  誰を待ってるのかな？

  テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

  

  夢の中でも仲良し♪

  テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

  

  どこを見てるの？

  テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

• CSSで実装するオートスライド

  

  

  

  

  

  　　

• CSSで実装するオートスライド

  

  

  

  

  

• CSSで実装するフォトギャラリー

  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 

• CSSで実装するヒーローイメージ

  photo1

  

  photo2

  

  photo3

  

  photo4