简要教程

这是一款简单使用纯CSS3制作的炫酷全屏响应式幻灯片特效。该幻灯片特效使用纯CSS制作，没有任何的js代码。

 使用方法

 HTML结构

该纯CSS3全屏响应式幻灯片的HTML结构如下：

  
   
    Slide One  
    Slide Two
    Slide Three
    Slide Four
  
   
   
  

    
Headline One
  
 
   
  

    
Headline Two
  
 
  
  

    
Headline Three
  
 
  
  

    
Headline Four
  

 CSS样式

该纯CSS3全屏响应式幻灯片的主要CSS样式如下：

JS响应式缩略图幻灯片特效

JS响应式缩略图幻灯片特效是一款点击左右箭头按钮，标题，缩略图，大图滑动切换效果。

下载

.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 is left to do is to target this text state.
We are going to use an attribute selector to select any input that has an ID that starts with slide.
Then we will further qualify the selector by adding the pseudo-class of "checked" */
/* This will target any of our radio inputs as they all begin with "slide" Then by using the adjacent sibling combinator which is the "+" sign, 
we can finally target our slide.*/
 
[id^="slide"]:checked + .slide {
  left: 0;       /* When our radio element is checked, we want to position our slide back on the left corner of our wrapper, so we will set left to zero */
  z-index: 100;   /* we wanna raise the z-index to 100, to be sure our slide is 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 will allow us to see the opacity go down to zero, but it will delay the transform until the next slide is already covering it.*/
}
[id^="slide"]:checked + .slide h1 {  /* Now we target our headline when our input is in its checked state */
  opacity: 1;
  transform: translateY(0);
  transition: all .5s .5s;   /* This will have our headline appearing and rising as the slide is coming onto the screen. */
}

以上就是纯CSS3全屏响应式幻灯片特效的内容，更多相关内容请关注PHP中文网（www.php.cn）！

立即学习“前端免费学习笔记（深入）”；