>提供向前和向后导航.
>不修改导航历史.
为内容的移动创造明确的方向.
>尽可能多地浏览浏览器.
我遇到的大多数其他CSS幻灯片并没有勾选所有这些框.
幸运的是,我花了很长时间,浏览器本身已经改进了无终端,到现在实际上是非常广泛的可能性,尽管有几个“现代”的CSS主义.为了防止这件事对其他任何人有用,我以为我会在这里发贴.
<ul class="css-slider"> <li class="slide"><img src="photos/a.jpg" /></li> <li class="slide"><img src="photos/b.jpg" /></li> <li class="slide"><img src="photos/c.jpg" /></li> <li class="slide"><img src="photos/d.jpg" /></li> <li class="slide"><img src="photos/e.jpg" /></li> </ul>
解决方法
UPDATE: 07001 that means ellipses will not render in SVG masks,this leads to the reflection failing… and don’t get me started on what Chrome 37.0.2062.120 (Mac) is doing if you hover off any of the images in the implemented example at the foot of this answer.
— 18 Sept 2014.
解释基本原则
幻灯片由两个主要部分组成,一个可视部分和一个交互部分.互动部分几乎保持静止,视觉部分是动画的.经过大量的玩耍之后,我扩展了最初的HTML结构(见上文),以便在幻灯片的内容周围加上一些额外的包装.这允许单独的交互和可视部分,并且对于其他有用的能力也是额外的灵活性,例如垂直居中和反射.
<ul class="css-slider"> <li class="slide" tabindex="1" id="l1"> <span class="slide-outer"> <span class="slide-inner"> <span class="slide-gfx" id="s1"> <img src="photos/a.jpg" /> </span> </span> </span> </li> <li class="slide" tabindex="1" id="l2"> <span class="slide-outer"> <span class="slide-inner"> <span class="slide-gfx" id="s2"> <img src="photos/b.jpg" /> </span> </span> </span> </li> ... </ul>
现在为了实际上有任何系统作为幻灯片演示,您需要有一些方法来识别当前或重点的幻灯片.在这种情况下,我依靠：专注于处理这种区别.您可能已经注意到上面添加了tabindex =“1”,这样就可以将伪类：焦点应用于意外的元素,如< li> – 这主要用于基于webkit的浏览器,但也可能会帮助其他代理商.
所以简单地说,所有的幻灯片堆叠在另一个顶部,当前的重点放在幻灯片中心在视口和给定最高的z指数,幻灯片在焦点的幻灯片从左边的屏幕翻译,幻灯片之后,将重点放映的幻灯片从右侧的屏幕翻译出来.应该注意的是,xy翻译只会影响幻灯片的视觉内容,互动部分仍然层叠在一起,填充整个视口区域,几乎…
我说几乎是因为为了通过鼠标或触摸在下一张和上一张幻灯片中触发焦点,交互式图层的一部分必须由用户访问和点击.使用左,右和填充的混合可以显示正确的区域,而不会移动视觉元素.
所以,随着当前重点的幻灯片的变化,交互式图层的可访问性也是如此.每次用户单击下一个或上一个箭头时,它们实际上集中在相邻的< li>元素,而不是单击执行任何类型的操作的链接.
有用的知道
>为了使它在Webkit浏览器上工作,需要使用tabindex属性,以便：focus Pseudo-class将用于表示幻灯片的任何基本元素.
>由于使用技巧,幻灯片将以反转的顺序播放.
>您可以使用选项卡导航幻灯片,但是由于点2,它会向后导航.如果您有Mac,则您可能需要在tweak your os settings之前选项卡才能运行.
>由于左边,右边的技巧来暴露导航箭头,当向前导航时,会有一个微小的视觉毛刺 – 因为你可以看到随后的上一个箭头快速地动画到位.
>因为这个系统的工作原理是：当焦点丢失时,重点放在幻灯片放映回到最初的幻灯片,因此,子链接不会在你的幻灯片中运行,除非你增强与JavaScript的交互.
>我的演示使用SVG背景图片,这些显然是可选的,在旧版浏览器上不起作用.
> Firefox v26.0(Mac / PC〜最可能更早版本)
> Chrome v32(Mac / PC〜最可能更早版本)
> Safari v7(Mac / PC〜最可能更早版本)
> Opera v18(Mac / PC〜最可能更早版本)
> Internet Explorer 9(PC)
IE7 & IE8 can’t even understand
:last-childor:nth-childso no,it does not work for them.
在下面的演示中,您将看到有一些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 – 以前有很多);这采取了一个稍微不同的方法,涉及视觉和交互式移动部件.最后我报废了它,因为它涉及到更多的浏览器处理,所以更笨重;这个纯色演示没有揭示.
