Pure CSS3 blind-style switching carousel effect-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Pure CSS3 blind-style switching carousel effect

Jan 18, 2017 pm 01:48 PM

Brief Tutorial

This is a blind-style switching carousel special effect made using pure CSS3. This special effect is made using background images. When the carousel is switched, a set of div elements are used to create the blinds effect, which is very cool.

How to use

HTML structure

The carousel effect uses 6 background images. The HTML structure is as follows:

&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;

Copy after login

Another 6 are used The Radio button serves as a switching button for the carousel:

&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;

Copy after login

CSS style

The basic CSS style of the carousel is as follows:

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

Copy after login

Background image style used in the carousel As follows:

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

Copy after login

The CSS style of the carousel image control button is as follows:

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

Copy after login

Finally set the CSS style for the image title:

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

Copy after login

The above is a pure CSS3 blind-style switching carousel The content of picture special effects. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn