Pure CSS3 Full-screen responsive slide effects

Brief tutorials

This is a cool full-screen responsive slide effect made with pure CSS3. This slide effect is made using pure CSS, without any JS code.

How to use

HTML structure

The HTML structure of the pure CSS3 full-screen responsive slide is as follows:

<div class= "wrap" > 
CSS Styles

The main CSS style for this pure CSS3 full-screen responsive slide is as follows:

. wrap {width:100%;  height:100%;  position:relative;        Overflow:hidden;  Background: #120103;  Color: #fff; Text-align:center;}  Header {background: #3E474F;  box-shadow:0.5em 1em #111;     Position:absolute;  top:0;  left:0;     z-index:900; width:100%;}  Header Label {color: #788188;  Cursor:pointer;    Display:inline-block;     Line-height:4.25em;  Font-size:. 667em;  Font-weight:bold; Padding:0 1em;}  Header Label:hover {background: #2e353b;}. slide {width:100%;  height:100%;  Position:absolute;  top:0;     left:100%;  Z-index:10;  Padding:8em 1em 0;  Background-color: #120103;  background-position:50% 50%;      Background-size:cover;  transition:left 0s. 75s; }.slide-one {Background-image:url ('.. /images/starryfarm.jpg ');}. Slide-two {Background-image:url ('.. /images/campusdarkdays.jpg ');}. Slide-three {Background-image:url ('.. /images/autumn.jpg ');}. Slide-four {Background-image:url ('.. /images/lakehouse.jpg ');} /* So all that's leftTo does is to the target this text state. We is going to the use of an attribute selector to select any input this has a ID that starts with slide. Then we'll further qualify the selector by adding the pseudo-class of ' checked ' *//* this would target any of our radio I Nputs as they all begin with "slide" and then by using the adjacent sibling combinator which are the "+" sign, we can finally T       Arget our slide.*/[id^= "Slide"]:checked +. Slide {left:0;  /* When we radio element are checked, we want to position we slide back on the left corner of our wrapper, so we'll set   Left to zero */z-index:100; /* We wanna raise the z-index to +, to being sure our slide are on top of the previous one. */transition:left. 65s Ease-out;}.  Slide H1 {opacity:0;  Transform:translatey (100%);      Transition:transform. 5s. 5s, opacity. 5s; /* This transition'll allow us to see the opacity go down to zero, but it'll delay the transform until the next slide is already covering it.*/}[id^= "slide"]:checked +. Slide H1 {/* Now we are headline when we are in the ITS-checked state */opacity:1;  Transform:translatey (0);   Transition:all. 5s. 5s; /* This'll has our headline appearing and rising as the slide are coming onto the screen. */}
The above is pure CSS3 full-screen response to the content of the slide effect, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

