Reiner CSS3-Schaltkarusselleffekt im Blind-Stil-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Reiner CSS3-Schaltkarusselleffekt im Blind-Stil

Jan 18, 2017 pm 01:48 PM

Kurzes Tutorial

Dies ist ein Spezialeffekt im Blind-Stil zum Wechseln eines Karussells, der mit reinem CSS3 erstellt wurde. Dieser Spezialeffekt wird mithilfe von Hintergrundbildern erzielt. Wenn das Karussell umgeschaltet wird, wird eine Reihe von Div-Elementen verwendet, um den Jalousieneffekt zu erzeugen, was sehr cool ist.

So verwenden Sie

HTML-Struktur

Dieser Karusselleffekt verwendet 6 Hintergrundbilder:

&lt;div class=&quot;slider&quot;&gt;
  &lt;div class=&quot;captions&quot;&gt;
    &lt;div class=&quot;c1&quot;&gt;duzy fiat&lt;/div&gt;
    &lt;div class=&quot;c2&quot;&gt;syrenka&lt;/div&gt;
    &lt;div class=&quot;c3&quot;&gt;wartburg&lt;/div&gt;
    &lt;div class=&quot;c4&quot;&gt;warszawa&lt;/div&gt;
    &lt;div class=&quot;c5&quot;&gt;wolga&lt;/div&gt;
    &lt;div class=&quot;c6&quot;&gt;polonez&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;img img1&quot;&gt;
    &lt;div class=&quot;frag frag1&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag2&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag3&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag4&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag5&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag6&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;img img2&quot;&gt;
    &lt;div class=&quot;frag frag1&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag2&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag3&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag4&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag5&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag6&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;img img3&quot;&gt;
    &lt;div class=&quot;frag frag1&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag2&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag3&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag4&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag5&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag6&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;img img4&quot;&gt;
    &lt;div class=&quot;frag frag1&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag2&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag3&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag4&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag5&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag6&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;img img5&quot;&gt;
    &lt;div class=&quot;frag frag1&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag2&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag3&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag4&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag5&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag6&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;img img6&quot;&gt;
    &lt;div class=&quot;frag frag1&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag2&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag3&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag4&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag5&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;frag frag6&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

Nach dem Login kopieren

Zusätzlich: Verwenden Sie 6 Optionsfelder, die als Umschalttasten für das Karussell dienen:

&lt;input type=&quot;radio&quot; name=&quot;slides&quot; id=&quot;slide1&quot; checked&gt;
&lt;input type=&quot;radio&quot; name=&quot;slides&quot; id=&quot;slide2&quot;&gt;
&lt;input type=&quot;radio&quot; name=&quot;slides&quot; id=&quot;slide3&quot;&gt;
&lt;input type=&quot;radio&quot; name=&quot;slides&quot; id=&quot;slide4&quot;&gt;
&lt;input type=&quot;radio&quot; name=&quot;slides&quot; id=&quot;slide5&quot;&gt;
&lt;input type=&quot;radio&quot; name=&quot;slides&quot; id=&quot;slide6&quot;&gt;

Nach dem Login kopieren

CSS-Stil

Der grundlegende CSS-Stil des Karussells ist wie folgt:

.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;
}

Nach dem Login kopieren

Karussell Der verwendete Hintergrundbildstil lautet wie folgt:

.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) }

Nach dem Login kopieren

Der CSS-Stil der Karussell-Steuerschaltfläche lautet wie folgt:

#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) }

Nach dem Login kopieren

Legen Sie abschließend den CSS-Stil für den Bildtitel fest :

.captions &gt; 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;
}

Nach dem Login kopieren

Das Obige ist der Inhalt des reinen CSS3-Shutter-Stil-Umschaltkarusselleffekts. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn