添加额外功能

在下面的演示中,您将看到有一些JavaScript兴盛,这些可以帮助炫耀构造可以做什么,还是逐渐增强.复选框,仅在演示中,应允许您启用或禁用某些功能.这些功能通过简单的类应用：

> .with-responsive-images〜little hack强制图像自动调整大小.
> .with-selection-disabled〜防止用户拖动和突出显示.
> .width-fade-in〜最初幻灯片放映.
> .with-reflection〜可以反映firefox和webkit.
> .with-slide-zoom〜悬停时,幻灯片将缩放至最大宽度.
> .with-slide-float〜关注幻灯片将浮起来.
> .with-slide-float-hover〜悬停幻灯片将悬浮.
> .with-shadow〜一个poorman的反思.

please note: the reflection add-on relies on arbitrary markup attributes. You will have to add unique ids to each .slide,and then extend the CSS to take them into account.

CSS细分

建立

好的,所以从这里开始是基本的设置.首先,因为我的幻灯片与图像我已经设置了一些基本的图像样式,这是所有可选的.

.slide-gfx img {
  max-width: 600px;
  max-height: auto;
  border-radius: 20px;
  Box-shadow: 0 0 80px rgba(255,255,1);
}

滑块蒙版作为包装器添加到整个幻灯片中,以防止在以全屏幕尺寸操作幻灯片时窗口滚动条显示.这也是可选的.

.css-slider-mask {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

现在我们得到滑块所需的实际设置.这第一部分是相当直截了当的,除了显示：none;部分.这最初隐藏了每个人的幻灯片,但是后来被覆盖了支持：第n个孩子的浏览器.很可能您的< body>元素将是第二个孩子,但您应该在使用之前检查.

.css-slider {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 96%;
  height: 100%;
  margin-left: 2%;
  z-index: 1;
}

.css-slider {
  position: relative;
  display: none;
}

body:nth-child(2) .css-slider {
  display: block;
}

幻灯片

接下来,我们下载幻灯片细节.由于不存在反转的General Sibling Selector(〜),幻灯片的所有默认样式表示未来(或下一个)状态.这是因为没有实际的方法来选择未来的幻灯片.

.css-slider .slide {
  display: block;
  position: absolute;
  left: 40px;
  top: 0;
  right: 0;
  bottom: 0;
  padding-left: 0;
  padding-right: 40px;
  z-index: 100;
  outline: 0; /* kill the focus rect! */
}

再次,默认情况下,我们设置向前箭头,然后再覆盖当前和过去的幻灯片.

.css-slider .slide {
  background: url('arrow-right.svg') no-repeat right center;
  background-size: 25px auto;
}

.css-slider .slide:hover {
  background-image: url('arrow-right-hover.svg');
  cursor: pointer;
}

现在重点放在幻灯片上,这里的关键项目是：焦点(正如我已经解释过的)以及我没有的最后一个孩子.最后一个孩子被使用而不是第一个孩子,因为再次,我们必须向后退(所有由于缺乏反向General Sibling Selector〜).为什么任何一个孩子都需要,所以当没有当前的焦点,即在页面加载时,我们可以“集中”初始幻灯片.

.css-slider .slide:target,.css-slider .slide:target:hover,.css-slider .slide:focus,.css-slider .slide:focus:hover,.css-slider .slide:last-child,.css-slider .slide:last-child:hover {
  left: 40px;
  right: 40px;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  z-index: 101;
  cursor: default;
}

现在我们需要影响所有滑过去的幻灯片.我有一个避免提到：目标伪类之前,基本上这已经被实现来支持“跳转导航”.有两个原因,我不会唱赞美的“跳转导航”：

>它部分由JavaScript供电.
>它依赖于#hash或#fragment值,由于创建历史状态可能会让您的网站的可用性受到影响.

无论如何,选择过去的幻灯片的技巧取决于General Sibling Selector.以下构造基本上意味着在.slide之后找到的.slide(s)：具有：focus.

.css-slider .slide:target ~ .slide,.css-slider .slide:focus ~ .slide {
  padding-left: 40px;
  padding-right: 0;
  left: 0;
  right: 40px;
}

.css-slider .slide:target ~ .slide,.css-slider .slide:focus ~ .slide {
  background: url('arrow-left.svg') no-repeat left center;
  background-size: 25px auto;
}

.css-slider .slide:target ~ .slide:hover,.css-slider .slide:focus ~ .slide:hover {
  background-image: url('arrow-left-hover.svg');
}

幻灯片内容

接下来,我们需要控制我们的幻灯片内容究竟发生了什么.我设计了这个系统,所以如果你想,你可以省略动画部分.这将意味着幻灯片将瞬间切换.这个下一部分是照顾这个.

.css-slider .slide .slide-outer {
  display: none;
  width: 100%;
  height: 100%;
}

幻灯片内部纯粹用于处理幻灯片内容的居中.它依赖于显示表和显示表格.

.css-slider .slide .slide-outer .slide-inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100%;
  height: 100%;
}

Slide-gfx只是一个包含你的幻灯片放置的包装.反射是从这个容器生成的,还有一些其他的视觉附加物也附加在它上面.

.css-slider .slide .slide-outer .slide-inner .slide-gfx {
  position: relative;
  display: inline-block;
  z-index: 102;
  text-align: left; /* override the centering back to defaults */
}

当不包含动画时,该部分负责即时切换.

.css-slider .slide:target .slide-outer,.css-slider .slide:focus .slide-outer,.css-slider .slide:last-child .slide-outer {
  display: block; /* if they don't support display table */
  display: table;
}

最后一个小孩覆盖

由于：没有重点突出的最后一个孩子的声明,如果你不做任何进一步的改变,你会发现某些事情中断.这是因为：最后一个孩子总是适用,不同于：焦点.为了纠正这一点,我们需要否定：最后一个孩子的变化,但只有当某些事情被集中在一起时.这就是下面的CSS.

.css-slider .slide:target ~ .slide:last-child,.css-slider .slide:focus ~ .slide:last-child {
  cursor: pointer;
}

.css-slider .slide:target ~ .slide:last-child .slide-outer,.css-slider .slide:focus ~ .slide:last-child .slide-outer {
  display: none;
}

最终令人厌烦的z-index黑客

到目前为止CSS已经相当笼统了,但总有一些东西…

此部分仅需要修复“上一张幻灯片”箭头的点击能力,以便最近的上一帧浮出任何其他方式.如果您不在乎之前的幻灯片操作,那么只要隐藏上一个箭头,您就可以摆脱这一步.这是非常讨厌的,因为如果CSS支持General Sibling Selector的反转版本,那么这个整个任意部分可以完成.

基本上,以下将支持多达5帧,如果您需要更多,添加更多.至少这个好消息是,您可以添加比您需要的更多帧,没有任何真正的不利影响.显然,如果你超过100帧,你必须调整CSS的其余部分的其他z索引.

.css-slider .slide:target ~ .slide:nth-child(1),.css-slider .slide:focus  ~ .slide:nth-child(1) { z-index:99; }
.css-slider .slide:target ~ .slide:nth-child(2),.css-slider .slide:focus  ~ .slide:nth-child(2) { z-index:98; }
.css-slider .slide:target ~ .slide:nth-child(3),.css-slider .slide:focus  ~ .slide:nth-child(3) { z-index:97; }
.css-slider .slide:target ~ .slide:nth-child(4),.css-slider .slide:focus  ~ .slide:nth-child(4) { z-index:96; }
.css-slider .slide:target ~ .slide:nth-child(5),.css-slider .slide:focus  ~ .slide:nth-child(5) { z-index:95; }

动画和附加组件

正如我所说,动画是可选的,以及CSS的所有其余部分,即视觉加载项.我会把这里的其余部分放在细节上.一旦你知道上面的技巧和CSS转换或动画,大部分都是相当直接的.它的主要原因是,像往常一样,供应商前缀;为了简洁,我已经删除了.要得到整个CSS,你可以从下面的演示中明确地做出.

please note: Most of these add-ons rely on quite modern CSS i.e. animations or SVGs

/** --------------------------------------------------------------------------
 * HANDLE THE SLIDE ANIMATION (optional)
 * ------------------------------------------------------------------------ */

/* Override the default instant slide behavIoUr */
.css-slider .slide .slide-outer {
  display: block !important;
  display: table !important;
}

/* set up the transitions */
.css-slider .slide .slide-outer {
  transition-property:                opacity,transform;
  transition-duration:                2s;
  transition-timing-function:         ease;
}

/* After state */
.css-slider .slide:target ~ .slide .slide-outer,.css-slider .slide:target ~ .slide:last-child .slide-outer,.css-slider .slide:focus ~ .slide .slide-outer,.css-slider .slide:focus ~ .slide:last-child .slide-outer {
  transform: translate(-150%,0);
  transform: translate3D(-150%,0);
}

/* Before state */
.css-slider .slide .slide-outer {
  transform: translate(200%,0);
  transform: translate3D(200%,0);
}

/* Focused state*/
.css-slider .slide:target .slide-outer,.css-slider .slide:last-child .slide-outer {
  transform: translate(0,0);
  transform: translate3D(0,0);
}

/** --------------------------------------------------------------------------
 * SMALL SCREEN FIX / SLIDE JERK (optional)
 * ---------------------------------------------------------------------------
 * When we shift 'left' and 'right' values -- in order to allow access to a future
 * or past arrow -- this can cause a jump in the responsive scaling of the slide.
 * if we transition the left value quickly,it can make this appear less jarring.
 */

.css-slider .slide {
  transition-property:        left,padding-left;
  transition-duration:        1s;
  transition-timing-function: ease;
}

/** --------------------------------------------------------------------------
 * Add-on module : responsive images
 * ------------------------------------------------------------------------ */
.with-responsive-images .slide-gfx img {
  width: 100%;
  height: auto;
}

/** --------------------------------------------------------------------------
 * Add-on module : stop user selection
 * ------------------------------------------------------------------------ */

/* if your slides don't need to be selectable,I recommend using this */
.with-selection-disabled {
  user-select: none;
}

/** --------------------------------------------------------------------------
 * Add-on module : initial fade in 
 * ------------------------------------------------------------------------ */
.with-fade-in .slide-gfx {
  opacity: 0;
}

/* animate into visibility */
.with-fade-in .slide-gfx {
  animation:           css-slideshow-fade-in 2s;
  animation-delay:     1s;
  animation-fill-mode: forwards;
}

/* Vebdor animations */
@keyframes css-slideshow-fade-in { from { opacity: 0; } to { opacity: 1; } }

/** --------------------------------------------------------------------------
 * Add-on module : slide reflection
 * ------------------------------------------------------------------------ */

/* force our slide-gfx to be inline-block and relative positioned */
.with-reflection .slide-gfx {
  display: inline-block !important;
}

/* reflection for webkit agents */
.with-reflection .slide-gfx > *:first-child {
  -webkit-Box-reflect: below 2px 
        -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(0.9,transparent),to(white));
}

/* make sure internal images don't keep inline spacing/margin */
.with-reflection .slide-gfx img {
  display: block;
}

/* generate the reflection */
.with-reflection .slide-gfx:after {
  content: '';
  position: absolute;
  display: block;
  mask: url("reflection-mask.svg#mask"); /* gradient fade the reflection */
  transform: scaleY(-1); /* flip clone to appear as reflection */
  opacity: 0.5; /* fade out reflection */
  top: 100%;
  width: 100%;
  height: 60px;
  z-index: 200;
  margin-top: 2px;
}

/* again,due to element() requiring IDs we need arbitrary code 
   per each slide and each slide-gfx needs an id */
.with-reflection #s1:after { background: -moz-element(#s1) no-repeat left bottom; }
.with-reflection #s2:after { background: -moz-element(#s2) no-repeat left bottom; }
.with-reflection #s3:after { background: -moz-element(#s3) no-repeat left bottom; }
.with-reflection #s4:after { background: -moz-element(#s4) no-repeat left bottom; }
.with-reflection #s5:after { background: -moz-element(#s5) no-repeat left bottom; }
.with-reflection #s6:after { background: -moz-element(#s6) no-repeat left bottom; }
.with-reflection #s7:after { background: -moz-element(#s7) no-repeat left bottom; }
.with-reflection #s8:after { background: -moz-element(#s8) no-repeat left bottom; }
.with-reflection #s9:after { background: -moz-element(#s9) no-repeat left bottom; }
.with-reflection #s10:after { background: -moz-element(#s10) no-repeat left bottom; }
.with-reflection #s11:after { background: -moz-element(#s11) no-repeat left bottom; }
.with-reflection #s12:after { background: -moz-element(#s12) no-repeat left bottom; }
.with-reflection #s13:after { background: -moz-element(#s13) no-repeat left bottom; }
.with-reflection #s14:after { background: -moz-element(#s14) no-repeat left bottom; }
.with-reflection #s15:after { background: -moz-element(#s15) no-repeat left bottom; }
.with-reflection #s16:after { background: -moz-element(#s16) no-repeat left bottom; }
.with-reflection #s17:after { background: -moz-element(#s17) no-repeat left bottom; }
.with-reflection #s18:after { background: -moz-element(#s18) no-repeat left bottom; }
.with-reflection #s19:after { background: -moz-element(#s19) no-repeat left bottom; }
.with-reflection #s20:after { background: -moz-element(#s20) no-repeat left bottom; }

/** --------------------------------------------------------------------------
 * Add-on module : slide zoom (optional,not compatible with slide float)
 * ------------------------------------------------------------------------ */
.with-slide-zoom .slide .slide-gfx > *:first-child {
  transition-property:                max-width;
  transition-duration:                2s;
  transition-timing-function:         ease-in-out;
  transition-delay:                   0.25s;
}

.with-slide-zoom .slide .slide-gfx > *:first-child:hover {
  max-width: 1000px;
}

/** --------------------------------------------------------------------------
 * Add-on module : slide float (optional,not compatible with slide zoom)
 * ------------------------------------------------------------------------ */

/* inital transition set-up */
.with-slide-float:not(.with-slide-zoom) .slide .slide-gfx > *:first-child,.with-slide-float-hover:not(.with-slide-zoom) .slide .slide-gfx > *:first-child {
  transition-property:        transform;
  transition-duration:        2s;
  transition-timing-function: ease-in-out;
}

/* we need a delay for the non-hover version */
.with-slide-float:not(.with-slide-zoom) .slide .slide-gfx > *:first-child {
  transition-delay: 2s;
}

/* initial levitation on focus */
.with-slide-float:not(.with-slide-zoom) .slide:target .slide-gfx > *:first-child,.with-slide-float:not(.with-slide-zoom) .slide:focus .slide-gfx > *:first-child,.with-slide-float-hover:not(.with-slide-zoom) .slide .slide-gfx > *:first-child:hover {
  transform: translate(0,-40px);
  transform: translate3D(0,-40px,0);
}

/* trigger the float animation after 4s */
.with-slide-float:not(.with-slide-zoom) .slide:target .slide-gfx > *:first-child,.with-slide-float-hover:not(.with-slide-zoom) .slide .slide-gfx > *:first-child:hover {
  animation:                         css-slideshow-levitate 4s;
  animation-direction:               alternate;
  animation-fill-iteration-count:    infinite;
  animation-timing-function:         ease-in-out;
  animation-delay:                   2s;
}

/* longer delay for automatic version i.e. non-hover */
.with-slide-float:not(.with-slide-zoom) .slide:target .slide-gfx > *:first-child,.with-slide-float:not(.with-slide-zoom) .slide:focus .slide-gfx > *:first-child {
  animation-delay:                   4s;
}

/* Vebdor animations for the float */
@keyframes css-slideshow-levitate {
  from { transform: translate(0,-40px); transform: translate3D(0,0); }
  to   { transform: translate(0,-20px); transform: translate3D(0,-20px,0); }
}

/** --------------------------------------------------------------------------
 * Add-on module : ground shadow (optional)
 * ------------------------------------------------------------------------ */

.with-shadow .slide .slide-gfx:before {
  content: '';
  background: url('slide-shadow.svg') no-repeat center center;
  position: absolute;
  bottom: -10px;
  left: -20px;
  right: -20px;
  height: 20px;
  z-index: -1;
  opacity: 0.7;
}

.with-shadow.with-slide-float .slide .slide-gfx:before,.with-shadow.with-slide-float-hover .slide .slide-gfx:before {
  transition-property:        opacity;
  transition-duration:        2s;
  transition-timing-function: ease-in-out;
}

.with-shadow.with-slide-float .slide .slide-gfx:before {
  transition-delay: 2s;
}

.with-shadow.with-slide-float .slide:target .slide-gfx:before,.with-shadow.with-slide-float .slide:focus .slide-gfx:before,.with-shadow.with-slide-float .slide:last-child .slide-gfx:before,.with-shadow.with-slide-float-hover .slide .slide-gfx:hover:before {
  opacity: 0.1;
  animation:                      css-slideshow-shadow 4s;
  animation-delay:                4s;
  animation-direction:            alternate;
  animation-fill-iteration-count: infinite;
  animation-timing-function:      ease-in-out;
}

.with-shadow.with-slide-float-hover .slide .slide-gfx:hover:before {
  animation-delay: 2s;
}

/* Vebdor animations for the float */
@keyframes css-slideshow-shadow { from { opacity: 0.1; } to { opacity: 0.7; } }

实施例(v0.2)

http://codelamp.co.uk/css-slideshow/v0.2/

please note: the jump nav i.e. circular dots do rely on a small bit of JavaScript. The rest is pure CSS.

之前的版本

正如我所说,改进这个系统花了相当多的时间.对于那些可能感兴趣的人,这里是我的(最后)版本0.1 – 以前有很多);这采取了一个稍微不同的方法,涉及视觉和交互式移动部件.最后我报废了它,因为它涉及到更多的浏览器处理,所以更笨重;这个纯色演示没有揭示.

http://jsfiddle.net/3cyP8/7/