ホームページ > 記事 > ウェブフロントエンド > 純粋な CSS3 ブラインド スタイルの切り替えカルーセル効果
簡単なチュートリアル
これは、純粋な CSS3 を使用して作成されたブラインド スタイルのスイッチング カルーセル特殊効果です。この特殊効果は背景画像を使用して作成され、カルーセルが切り替わると、一連の div 要素を使用してブラインド効果が作成されます。これは非常にクールです。
使い方
HTML構造
カルーセルエフェクトは6つの背景画像を使用します。HTML構造は次のとおりです:
<div class="slider"> <div class="captions"> <div class="c1">duzy fiat</div> <div class="c2">syrenka</div> <div class="c3">wartburg</div> <div class="c4">warszawa</div> <div class="c5">wolga</div> <div class="c6">polonez</div> </div> <div class="img img1"> <div class="frag frag1"></div> <div class="frag frag2"></div> <div class="frag frag3"></div> <div class="frag frag4"></div> <div class="frag frag5"></div> <div class="frag frag6"></div> </div> <div class="img img2"> <div class="frag frag1"></div> <div class="frag frag2"></div> <div class="frag frag3"></div> <div class="frag frag4"></div> <div class="frag frag5"></div> <div class="frag frag6"></div> </div> <div class="img img3"> <div class="frag frag1"></div> <div class="frag frag2"></div> <div class="frag frag3"></div> <div class="frag frag4"></div> <div class="frag frag5"></div> <div class="frag frag6"></div> </div> <div class="img img4"> <div class="frag frag1"></div> <div class="frag frag2"></div> <div class="frag frag3"></div> <div class="frag frag4"></div> <div class="frag frag5"></div> <div class="frag frag6"></div> </div> <div class="img img5"> <div class="frag frag1"></div> <div class="frag frag2"></div> <div class="frag frag3"></div> <div class="frag frag4"></div> <div class="frag frag5"></div> <div class="frag frag6"></div> </div> <div class="img img6"> <div class="frag frag1"></div> <div class="frag frag2"></div> <div class="frag frag3"></div> <div class="frag frag4"></div> <div class="frag frag5"></div> <div class="frag frag6"></div> </div> </div>
さらに、カルーセルの切り替えボタンとして6つのラジオボタンを使用します:
<input type="radio" name="slides" id="slide1" checked> <input type="radio" name="slides" id="slide2"> <input type="radio" name="slides" id="slide3"> <input type="radio" name="slides" id="slide4"> <input type="radio" name="slides" id="slide5"> <input type="radio" name="slides" id="slide6">
CSSスタイル
カルーセル チャートの基本的な CSS スタイルは次のとおりです:
.slider, .img { width: inherit; height: inherit; } .slider { position: relative; overflow: hidden; background-color: #000; border: 8px solid #eee; border-radius: 5px; box-shadow: 0 7px 20px rgba(0,0,0,.5); } .img { position: absolute; margin-left: -8px; perspective: 500px; } .frag { width: 150px; height: inherit; float: left; opacity: 0; z-index: 0; transform-origin: center right; transform: rotateY(90deg) translateZ(100px) scale(1.5); transition: transform .6s, opacity .6s, -webkit-filter 2s ease-out; -webkit-filter: saturate(0) blur(10px) brightness(.6) contrast(4); } .img .frag2 { background-position: -150px 0; transition-delay: .2s; } .img .frag3 { background-position: -300px 0; transition-delay: .4s; } .img .frag4 { background-position: -450px 0; transition-delay: .6s; } .img .frag5 { background-position: -600px 0; transition-delay: .8s; } .img .frag6 { background-position: -750px 0; transition-delay: 1s; }
カルーセル チャートで使用される背景画像のスタイルは次のとおりです:
.img1 .frag { background-image: url(1.jpg) } .img2 .frag { background-image: url(2.jpg) } .img3 .frag { background-image: url(3.jpg) } .img4 .frag { background-image: url(4.jpg) } .img5 .frag { background-image: url(5.jpg) } .img6 .frag { background-image: url(6.jpg) }
カルーセル チャートのコントロール ボタンの CSS スタイルは次のとおりです:
#slide1:checked ~ .slider .img1 .frag, #slide2:checked ~ .slider .img2 .frag, #slide3:checked ~ .slider .img3 .frag, #slide4:checked ~ .slider .img4 .frag, #slide5:checked ~ .slider .img5 .frag, #slide6:checked ~ .slider .img6 .frag { transform: rotateY(0) translateZ(0) scale(1); -webkit-filter: saturate(1) blur(0) brightness(1) contrast(1); opacity: 1; z-index: 1; } .controls { position: absolute; bottom: -50px; left: 50%; margin-left: -115px; /*(6elem30px+5el10px)/2=115px*/ } .controls label { display: block; height: 10px; width: 30px; float: left; background-color: #000; margin-right: 10px; cursor: pointer; opacity: .2; transition: opacity .5s; } .controls label:hover, .side-controls label:hover, #slide1:checked ~ .controls label:nth-of-type(1), #slide2:checked ~ .controls label:nth-of-type(2), #slide3:checked ~ .controls label:nth-of-type(3), #slide4:checked ~ .controls label:nth-of-type(4), #slide5:checked ~ .controls label:nth-of-type(5), #slide6:checked ~ .controls label:nth-of-type(6) { opacity: .8; } .side-controls label { position: absolute; display: block; border-top: 30px solid transparent; border-bottom: 30px solid transparent; top: 50%; margin-top: -15px; cursor: pointer; opacity: .2; transition: opacity .5s; } #slide1:checked ~ .side-controls label:nth-of-type(6), #slide2:checked ~ .side-controls label:nth-of-type(1), #slide3:checked ~ .side-controls label:nth-of-type(2), #slide4:checked ~ .side-controls label:nth-of-type(3), #slide5:checked ~ .side-controls label:nth-of-type(4), #slide6:checked ~ .side-controls label:nth-of-type(5) { left: -40px; border-right: 40px solid #000; } #slide1:checked ~ .side-controls label:nth-of-type(2), #slide2:checked ~ .side-controls label:nth-of-type(3), #slide3:checked ~ .side-controls label:nth-of-type(4), #slide4:checked ~ .side-controls label:nth-of-type(5), #slide5:checked ~ .side-controls label:nth-of-type(6), #slide6:checked ~ .side-controls label:nth-of-type(1) { right: -40px; border-left: 40px solid #000; } #slide2:checked ~ .slider .captions .c2, #slide1:checked ~ .slider .captions .c1, #slide3:checked ~ .slider .captions .c3, #slide4:checked ~ .slider .captions .c4, #slide5:checked ~ .slider .captions .c5, #slide6:checked ~ .slider .captions .c6 { text-shadow: 0 0 0 rgba(255,255,255,.9) }
最終的に設定画像タイトルの CSS スタイル:
.captions > div { position: absolute; right: 20px; bottom: 7px; color: transparent; text-shadow: 0 0 60px transparent; font-size: 3em; z-index: 1; text-transform: uppercase; transition: text-shadow 2s; }
上記は、純粋な CSS3 シャッター スタイルの切り替えカルーセル効果の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。