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

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

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

    img img img

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

    [ 閉じる ]

    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で実装する手動スライドショー

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

    img

    誰を待ってるのかな?

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

    img

    夢の中でも仲良し♪

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

    img

    どこを見てるの?

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

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

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

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

    • img
    • img
    • img
    • img
    • img
    • img
    • img
    • img
    • img
    • img

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

    img
    img
    img
    img