站长资源
中国站长网站

纯css的轮播图效果

<p> 很多进入前端的新人,都看不起css,认为自己能把页面布局出来了,css没什么难度,一心羡慕那些会写JS的大神。JS固然重要,但是随着css3的普及,JS逐渐从担当网页效果的角色中淡出,而且随着html5的普及,连一些简单的验证也不在需要JS,所以奉劝各位新人不要盲目的追捧JS,这样只会打击你的自信心。 </p> <p> 废话不多说了,先看下其中最普通的效果 </p> <p> </p> <p data-height="550" data-theme-id="dark" data-slug-hash="EwzqvV" data-default-tab="result" data-user="Moreduo" data-embed-version="2" data-pen-title="纯css的轮播图效果" class="codepen"> See the Pen <a href="https://codepen.io/Moreduo/pen/EwzqvV/">纯css的轮播图效果</a> by Moreduo (<a href="https://codepen.io/Moreduo">@Moreduo</a>) on <a href="https://codepen.io">CodePen</a>. </p> <p><script async="" src="https://production-assets.codepen.io/assets/embed/ei.js"></script></p> <p> </p> <p> 下面看具体代码: </p> <p> html部分 </p> <p> </p> <pre class="prettyprint lang-html">&lt;center&gt; &lt;section id="rt-showcase-surround"&gt; &lt;div id="rt-showcase" class="slider-container rt-overlay-dark"&gt; &lt;div class="rt-container slider-container"&gt; &lt;div class="rt-grid-12 rt-alpha rt-omega"&gt; &lt;div class="csslider1 autoplay"&gt; &lt;input name="cs_anchor1" autocomplete="off" id="cs_slide1_0" type="radio" class="cs_anchor slide" &gt; &lt;input name="cs_anchor1" autocomplete="off" id="cs_slide1_1" type="radio" class="cs_anchor slide" &gt; &lt;input name="cs_anchor1" autocomplete="off" id="cs_slide1_2" type="radio" class="cs_anchor slide" &gt; &lt;input name="cs_anchor1" autocomplete="off" id="cs_play1" type="radio" class="cs_anchor" checked&gt; &lt;input name="cs_anchor1" autocomplete="off" id="cs_pause1" type="radio" class="cs_anchor" &gt; &lt;ul&gt; &lt;div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;"&gt; &lt;img src="http://iph.href.lu/833x500?text=Moreduo&amp;bg=00CCFF" style="width: 100%;"&gt; &lt;/div&gt; &lt;li class="num0 img"&gt; &lt;img src="http://iph.href.lu/833x500?text=Moreduo&amp;bg=00CCFF" alt="Clouds" title="Clouds" /&gt; &lt;/li&gt; &lt;li class="num1 img"&gt; &lt;img src="http://iph.href.lu/833x500?text=Moreduo&amp;bg=663300" alt="Typewriter" title="Typewriter" /&gt; &lt;/li&gt; &lt;li class="num2 img"&gt; &lt;img src="http://iph.href.lu/833x500?text=Moreduo&amp;bg=990033" alt="Bicycle" title="Bicycle" /&gt; &lt;/li&gt; &lt;/ul&gt; &lt;div class="cs_arrowprev"&gt; &lt;label class="num0" for="cs_slide1_0"&gt;&lt;/label&gt; &lt;label class="num1" for="cs_slide1_1"&gt;&lt;/label&gt; &lt;label class="num2" for="cs_slide1_2"&gt;&lt;/label&gt; &lt;/div&gt; &lt;div class="cs_arrownext"&gt; &lt;label class="num0" for="cs_slide1_0"&gt;&lt;/label&gt; &lt;label class="num1" for="cs_slide1_1"&gt;&lt;/label&gt; &lt;label class="num2" for="cs_slide1_2"&gt;&lt;/label&gt; &lt;/div&gt; &lt;div class="cs_bullets"&gt; &lt;label class="num0" for="cs_slide1_0"&gt; &lt;span class="cs_point"&gt;&lt;/span&gt; &lt;span class="cs_thumb"&gt;&lt;img src="http://iph.href.lu/79x48?text=Moreduo&amp;bg=00CCFF" alt="Clouds" title="Clouds" /&gt;&lt;/span&gt; &lt;/label&gt; &lt;label class="num1" for="cs_slide1_1"&gt; &lt;span class="cs_point"&gt;&lt;/span&gt; &lt;span class="cs_thumb"&gt;&lt;img src="http://iph.href.lu/79x48?text=Moreduo&amp;bg=663300" alt="Typewriter" title="Typewriter" /&gt;&lt;/span&gt; &lt;/label&gt; &lt;label class="num2" for="cs_slide1_2"&gt; &lt;span class="cs_point"&gt;&lt;/span&gt; &lt;span class="cs_thumb"&gt;&lt;img src="http://iph.href.lu/79x48?text=Moreduo&amp;bg=990033" alt="Bicycle" title="Bicycle" /&gt;&lt;/span&gt; &lt;/label&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;/center&gt;</pre> <p>CSS部分</p> <pre class="prettyprint lang-css">@font-face { font-weight: normal; font-style: normal; } .csslider1 { display: inline-block; position: relative; max-width: 833px; width: 100%; margin-top: 10px; } .csslider1 &gt; .cs_anchor { display: none; } .csslider1 &gt; ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider1 &gt; ul &gt; li.img img { width: 100%; } .csslider1 &gt; ul &gt; li.img { font-size: 0pt; -khtml-user-select: none; -moz-user-select: none; user-select: none; } .csslider1 &gt; ul &gt; li { position: relative; display: inline-block; width: 100%; height: 100%; overflow: hidden; font-size: 15px; font-size: initial; line-height: normal; white-space: normal; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .csslider1 .cs_lnk{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider1 &gt; .cs_arrowprev, .csslider1 &gt; .cs_arrownext { position: absolute; top: 50%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 5; } .csslider1 &gt; .cs_arrowprev &gt; label, .csslider1 &gt; .cs_arrownext &gt; label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider1 &gt; .cs_arrowprev { left: 0; } .csslider1 &gt; .cs_arrownext { right: 0; } .csslider1 &gt; .cs_arrowprev &gt; label.num2, .csslider1 &gt; .cs_arrownext &gt; label.num1 { opacity: 1; z-index: 5; } .csslider1 &gt; .slide:checked ~ .cs_arrowprev &gt; label, .csslider1 &gt; .slide:checked ~ .cs_arrownext &gt; label { opacity: 0; z-index: -1; } .csslider1 &gt; #cs_slide1_0:checked ~ .cs_arrowprev &gt; label.num2, .csslider1 &gt; #cs_slide1_0:checked ~ .cs_arrownext &gt; label.num1, .csslider1 &gt; #cs_slide1_1:checked ~ .cs_arrowprev &gt; label.num0, .csslider1 &gt; #cs_slide1_1:checked ~ .cs_arrownext &gt; label.num2, .csslider1 &gt; #cs_slide1_2:checked ~ .cs_arrowprev &gt; label.num1, .csslider1 &gt; #cs_slide1_2:checked ~ .cs_arrownext &gt; label.num0 { opacity: 1; z-index: 5; } /* calculate autoplay */ @-webkit-keyframes arrow { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @-moz-keyframes arrow { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @-ms-keyframes arrow { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @-o-keyframes arrow { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider1 &gt; #cs_play1:checked ~ .cs_arrowprev &gt; label.num2, .csslider1 &gt; #cs_play1:checked ~ .cs_arrownext &gt; label.num1, .csslider1 &gt; #cs_pause1:checked ~ .cs_arrowprev &gt; label.num2, .csslider1 &gt; #cs_pause1:checked ~ .cs_arrownext &gt; label.num1 { -webkit-animation: arrow 12000ms infinite -2000ms; -moz-animation: arrow 12000ms infinite -2000ms; -ms-animation: arrow 12000ms infinite -2000ms; -o-animation: arrow 12000ms infinite -2000ms; animation: arrow 12000ms infinite -2000ms; } .csslider1 &gt; #cs_play1:checked ~ .cs_arrowprev &gt; label.num0, .csslider1 &gt; #cs_play1:checked ~ .cs_arrownext &gt; label.num2, .csslider1 &gt; #cs_pause1:checked ~ .cs_arrowprev &gt; label.num0, .csslider1 &gt; #cs_pause1:checked ~ .cs_arrownext &gt; label.num2 { -webkit-animation: arrow 12000ms infinite 2000ms; -moz-animation: arrow 12000ms infinite 2000ms; -ms-animation: arrow 12000ms infinite 2000ms; -o-animation: arrow 12000ms infinite 2000ms; animation: arrow 12000ms infinite 2000ms; } .csslider1 &gt; #cs_play1:checked ~ .cs_arrowprev &gt; label.num1, .csslider1 &gt; #cs_play1:checked ~ .cs_arrownext &gt; label.num0, .csslider1 &gt; #cs_pause1:checked ~ .cs_arrowprev &gt; label.num1, .csslider1 &gt; #cs_pause1:checked ~ .cs_arrownext &gt; label.num0 { -webkit-animation: arrow 12000ms infinite 6000ms; -moz-animation: arrow 12000ms infinite 6000ms; -ms-animation: arrow 12000ms infinite 6000ms; -o-animation: arrow 12000ms infinite 6000ms; animation: arrow 12000ms infinite 6000ms; } .csslider1.cs_pauseHover:hover &gt; .cs_arrowprev &gt; label, .csslider1 &gt; #cs_pause1:checked ~ .cs_arrowprev &gt; label, .csslider1.cs_pauseHover:hover &gt; .cs_arrownext &gt; label, .csslider1 &gt; #cs_pause1:checked ~ .cs_arrownext &gt; label { -webkit-animation-play-state: paused !important; -moz-animation-play-state: paused !important; -ms-animation-play-state: paused !important; -o-animation-play-state: paused !important; animation-play-state: paused !important; } /* stop */ .csslider1 &gt; .slide:checked ~ .cs_arrowprev &gt; label, .csslider1 &gt; .slide:checked ~ .cs_arrownext &gt; label { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } /* /calculate autoplay */ .csslider1 &gt; .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .csslider1 &gt; .cs_bullets &gt; div { margin-left: -50%; width: 100%; } .csslider1 &gt; .cs_bullets &gt; label { position: relative; display: inline-block; cursor: pointer; } .csslider1 &gt; .cs_bullets &gt; label &gt; .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -39.5px; top: -48px; }.csslider1 &gt; .cs_description { z-index: 3; } .csslider1 &gt; .cs_description a, .csslider1 &gt; .cs_description a:visited, .csslider1 &gt; .cs_description a:active { color: inherit; } .csslider1 &gt; .cs_description a:hover { text-decoration: none; } .csslider1 &gt; .cs_description &gt; label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider1 &gt; .cs_description &gt; label &gt; span { vertical-align: top; } .csslider1 &gt; .cs_description &gt; label span { display: inline-block; } .csslider1 &gt; #cs_slide1_0:checked ~ ul &gt; li.num0, .csslider1 &gt; #cs_slide1_1:checked ~ ul &gt; li.num1, .csslider1 &gt; #cs_slide1_2:checked ~ ul &gt; li.num2 { opacity: 1; z-index: 2; } .csslider1 &gt; ul &gt; li { position: absolute; left: 0; top: 0; display: inline-block; opacity: 0; z-index: 1; -webkit-transition: opacity 2000ms ease; -moz-transition: opacity 2000ms ease; -ms-transition: opacity 2000ms ease; -o-transition: opacity 2000ms ease; transition: opacity 2000ms ease; } .csslider1 &gt; ul &gt; li.num0 { opacity: 1; z-index: 2; } .csslider1 &gt; .slide:checked ~ ul &gt; li.num0 { opacity: 0; z-index: 1; } /* calculate autoplay */ @-webkit-keyframes fade { 0%, 50%, 100% { opacity: 0; z-index: 2; } 16.666666666666668%, 33.333333333333336% { opacity: 1; z-index: 2; } } @-moz-keyframes fade { 0%, 50%, 100% { opacity: 0; z-index: 2; } 16.666666666666668%, 33.333333333333336% { opacity: 1; z-index: 2; } } @-ms-keyframes fade { 0%, 50%, 100% { opacity: 0; z-index: 2; } 16.666666666666668%, 33.333333333333336% { opacity: 1; z-index: 2; } } @-o-keyframes fade { 0%, 50%, 100% { opacity: 0; z-index: 2; } 16.666666666666668%, 33.333333333333336% { opacity: 1; z-index: 2; } } @keyframes fade { 0%, 50%, 100% { opacity: 0; z-index: 2; } 16.666666666666668%, 33.333333333333336% { opacity: 1; z-index: 2; } } .csslider1 &gt; #cs_play1:checked ~ ul &gt; li.num0, .csslider1 &gt; #cs_pause1:checked ~ ul &gt; li.num0 { -webkit-animation: fade 12000ms infinite -2000ms; -moz-animation: fade 12000ms infinite -2000ms; -ms-animation: fade 12000ms infinite -2000ms; -o-animation: fade 12000ms infinite -2000ms; animation: fade 12000ms infinite -2000ms; } .csslider1 &gt; #cs_play1:checked ~ ul &gt; li.num1, .csslider1 &gt; #cs_pause1:checked ~ ul &gt; li.num1 { -webkit-animation: fade 12000ms infinite 2000ms; -moz-animation: fade 12000ms infinite 2000ms; -ms-animation: fade 12000ms infinite 2000ms; -o-animation: fade 12000ms infinite 2000ms; animation: fade 12000ms infinite 2000ms; } .csslider1 &gt; #cs_play1:checked ~ ul &gt; li.num2, .csslider1 &gt; #cs_pause1:checked ~ ul &gt; li.num2 { -webkit-animation: fade 12000ms infinite 6000ms; -moz-animation: fade 12000ms infinite 6000ms; -ms-animation: fade 12000ms infinite 6000ms; -o-animation: fade 12000ms infinite 6000ms; animation: fade 12000ms infinite 6000ms; } .csslider1 &gt; #cs_play1:checked ~ ul &gt; li, .csslider1 &gt; #cs_pause1:checked ~ ul &gt; li { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .csslider1.cs_pauseHover:hover &gt; ul &gt; li, .csslider1 &gt; #cs_pause1:checked ~ ul &gt; li{ -webkit-animation-play-state: paused !important; -moz-animation-play-state: paused !important; -ms-animation-play-state: paused !important; -o-animation-play-state: paused !important; animation-play-state: paused !important; } /* stop */ .csslider1 &gt; .slide:checked ~ ul &gt; li { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } /* /calculate autoplay */ .csslider1 { -webkit-perspective: 500px; -moz-perspective: 500px; -ms-perspective: 500px; -o-perspective: 500px; perspective: 500px; } .csslider1 &gt; .cs_play_pause { -webkit-transition: .5s opacity 0s ease; -moz-transition: .5s opacity 0s ease; -ms-transition: .5s opacity 0s ease; -o-transition: .5s opacity 0s ease; transition: .5s opacity 0s ease; } .csslider1 &gt; .cs_arrowprev { -webkit-transition: .5s opacity .15s ease, .5s -webkit-transform .15s cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: .5s opacity .15s ease, .5s -moz-transform .15s cubic-bezier(0.680, -0.550, 0.265, 1.550); -ms-transition: .5s opacity .15s ease, .5s -ms-transform .15s cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: .5s opacity .15s ease, .5s -o-transform .15s cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: .5s opacity .15s ease, .5s transform .15s cubic-bezier(0.680, -0.550, 0.265, 1.550); -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } .csslider1 &gt; .cs_arrownext { -webkit-transition: .5s opacity .3s ease, .5s -webkit-transform .3s cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: .5s opacity .3s ease, .5s -moz-transform .3s cubic-bezier(0.680, -0.550, 0.265, 1.550); -ms-transition: .5s opacity .3s ease, .5s -ms-transform .3s cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: .5s opacity .3s ease, .5s -o-transform .3s cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: .5s opacity .3s ease, .5s transform .3s cubic-bezier(0.680, -0.550, 0.265, 1.550); -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } .csslider1 &gt; .cs_arrowprev, .csslider1 &gt; .cs_arrownext, .csslider1 &gt; .cs_play_pause { opacity: 0; } .csslider1:hover &gt; .cs_arrowprev, .csslider1:hover &gt; .cs_arrownext, .csslider1:hover &gt; .cs_play_pause { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); }.csslider1 &gt; .cs_arrowprev &gt; label, .csslider1 &gt; .cs_arrownext &gt; label { overflow: hidden; margin-top: -35px; width: 40px; height: 70px; /* Fallback for web browsers that doesn't support RGBa */ background: #000; background-color: rgba(0,0,0,0.6); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .csslider1 &gt; .cs_arrowprev { left: 70px; } .csslider1 &gt; .cs_arrownext { right: 70px; } .csslider1 &gt; .cs_arrowprev &gt; label { right: 0; } .csslider1 &gt; .cs_arrownext &gt; label { left: 0; } .csslider1 &gt; .cs_arrowprev &gt; label:after { content: '&lt;'; } .csslider1 &gt; .cs_arrownext &gt; label:after { content: '&gt;'; } .csslider1 &gt; .cs_arrowprev &gt; label:after, .csslider1 &gt; .cs_arrownext &gt; label:after { display: block; font: 40px "demurecontrols"; text-align: center; line-height: 76px; color: #fff; } .csslider1 &gt; .cs_arrowprev &gt; label, .csslider1 &gt; .cs_arrownext &gt; label { -webkit-transition: 300ms width ease, 300ms margin-left ease, 300ms background-color ease; -moz-transition: 300ms width ease, 300ms margin-left ease, 300ms background-color ease; -ms-transition: 300ms width ease, 300ms margin-left ease, 300ms background-color ease; -o-transition: 300ms width ease, 300ms margin-left ease, 300ms background-color ease; transition: 300ms width ease, 300ms margin-left ease, 300ms background-color ease; } .csslider1 &gt; .cs_arrowprev:hover &gt; label { background-color: #1FA5AD; width: 70px; } .csslider1 &gt; .cs_arrownext:hover &gt; label { background-color: #1FA5AD; width: 70px; }.csslider1 &gt; .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider1 &gt; .cs_bullets &gt; label { -webkit-perspective: 500px; -moz-perspective: 500px; -ms-perspective: 500px; -o-perspective: 500px; perspective: 500px; } .csslider1 &gt; .cs_bullets &gt; label &gt; .cs_thumb { border: 3px solid #1FA5AD; margin-top: -11px; -webkit-transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), visibility 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275); -moz-transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), -moz-transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), visibility 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275); -ms-transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), -ms-transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), visibility 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275); -o-transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), -o-transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), visibility 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275); transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), visibility 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275); -webkit-transform-origin: 0% 100% 0px; -moz-transform-origin: 0% 100% 0px; -ms-transform-origin: 0% 100% 0px; -o-transform-origin: 0% 100% 0px; transform-origin: 0% 100% 0px; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); } .csslider1 &gt; .cs_bullets &gt; label &gt; .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -1px; bottom: -8px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #1FA5AD; } .csslider1 &gt; .cs_bullets &gt; label:hover &gt; .cs_thumb { visibility: visible; opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } .csslider1 &gt; .cs_bullets &gt; label { margin: 0 6px; padding: 9px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; /* Fallback for web browsers that doesn't support RGBa */ background: #000; background-color: rgba(0,0,0,0.6); } .csslider1 &gt; .cs_bullets &gt; label.num0 { background-color: #1FA5AD; } .csslider1 &gt; .slide:checked ~ .cs_bullets &gt; label { /* Fallback for web browsers that doesn't support RGBa */ background: #000; background-color: rgba(0,0,0,0.6); } .csslider1 &gt; #cs_slide1_0:checked ~ .cs_bullets &gt; label.num0, .csslider1 &gt; #cs_slide1_1:checked ~ .cs_bullets &gt; label.num1, .csslider1 &gt; #cs_slide1_2:checked ~ .cs_bullets &gt; label.num2 { background-color: #1FA5AD; } .csslider1 &gt; .cs_bullets &gt; label:hover { background-color: #1FA5AD; } /* calculate autoplay */ @-webkit-keyframes bullet { 0%, 33.32333333333334% { background-color: #1FA5AD; } 33.333333333333336%, 100% { background: #000; background-color: rgba(0,0,0,0.6); } } @-moz-keyframes bullet { 0%, 33.32333333333334% { background-color: #1FA5AD; } 33.333333333333336%, 100% { background: #000; background-color: rgba(0,0,0,0.6); } } @-ms-keyframes bullet { 0%, 33.32333333333334% { background-color: #1FA5AD; } 33.333333333333336%, 100% { background: #000; background-color: rgba(0,0,0,0.6); } } @-o-keyframes bullet { 0%, 33.32333333333334% { background-color: #1FA5AD; } 33.333333333333336%, 100% { background: #000; background-color: rgba(0,0,0,0.6); } } @keyframes bullet { 0%, 33.32333333333334% { background-color: #1FA5AD; } 33.333333333333336%, 100% { background: #000; background-color: rgba(0,0,0,0.6); } } .csslider1 &gt; #cs_play1:checked ~ .cs_bullets &gt; label.num0, .csslider1 &gt; #cs_pause1:checked ~ .cs_bullets &gt; label.num0 { -webkit-animation: bullet 12000ms infinite -2000ms; -moz-animation: bullet 12000ms infinite -2000ms; -ms-animation: bullet 12000ms infinite -2000ms; -o-animation: bullet 12000ms infinite -2000ms; animation: bullet 12000ms infinite -2000ms; } .csslider1 &gt; #cs_play1:checked ~ .cs_bullets &gt; label.num1, .csslider1 &gt; #cs_pause1:checked ~ .cs_bullets &gt; label.num1 { -webkit-animation: bullet 12000ms infinite 2000ms; -moz-animation: bullet 12000ms infinite 2000ms; -ms-animation: bullet 12000ms infinite 2000ms; -o-animation: bullet 12000ms infinite 2000ms; animation: bullet 12000ms infinite 2000ms; } .csslider1 &gt; #cs_play1:checked ~ .cs_bullets &gt; label.num2, .csslider1 &gt; #cs_pause1:checked ~ .cs_bullets &gt; label.num2 { -webkit-animation: bullet 12000ms infinite 6000ms; -moz-animation: bullet 12000ms infinite 6000ms; -ms-animation: bullet 12000ms infinite 6000ms; -o-animation: bullet 12000ms infinite 6000ms; animation: bullet 12000ms infinite 6000ms; } .csslider1 &gt; #cs_play1:checked ~ .cs_bullets &gt; label, .csslider1 &gt; #cs_pause1:checked ~ .cs_bullets &gt; label { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .csslider1.cs_pauseHover:hover &gt; .cs_bullets &gt; label, .csslider1 &gt; #cs_pause1:checked ~ .cs_bullets &gt; label { -webkit-animation-play-state: paused !important; -moz-animation-play-state: paused !important; -ms-animation-play-state: paused !important; -o-animation-play-state: paused !important; animation-play-state: paused !important; } /* stop */ .csslider1 &gt; .slide:checked ~ .cs_bullets &gt; label { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } /* /calculate autoplay */ .csslider1 &gt; .cs_description &gt; label { font: 20px 'Roboto', sans-serif; line-height: normal; bottom: 35px; left: 20px; top: auto; opacity: 1; z-index: 1; -webkit-perspective: 500px; -moz-perspective: 500px; -ms-perspective: 500px; -o-perspective: 500px; perspective: 500px; } .csslider1 &gt; .cs_description &gt; label &gt; span { margin: 1px 10px; padding: 10px; color: #fff; overflow: hidden; -webkit-transform-origin: 0% 0% 0px; -moz-transform-origin: 0% 0% 0px; -ms-transform-origin: 0% 0% 0px; -o-transform-origin: 0% 0% 0px; transform-origin: 0% 0% 0px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .csslider1 &gt; #cs_slide1_0:checked ~ .cs_description &gt; .num0, .csslider1 &gt; #cs_slide1_1:checked ~ .cs_description &gt; .num1, .csslider1 &gt; #cs_slide1_2:checked ~ .cs_description &gt; .num2 { z-index: 2; } .csslider1 &gt; #cs_slide1_0:checked ~ .cs_description &gt; .num0 &gt; .cs_descr, .csslider1 &gt; #cs_slide1_1:checked ~ .cs_description &gt; .num1 &gt; .cs_descr, .csslider1 &gt; #cs_slide1_2:checked ~ .cs_description &gt; .num2 &gt; .cs_descr { opacity: 1; visibility: visible; -webkit-transition: 750ms opacity 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -webkit-transform 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: 750ms opacity 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -moz-transform 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -ms-transition: 750ms opacity 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -ms-transform 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: 750ms opacity 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -o-transform 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 750ms opacity 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms transform 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } .csslider1 &gt; #cs_slide1_0:checked ~ .cs_description &gt; .num0 &gt; .cs_title, .csslider1 &gt; #cs_slide1_1:checked ~ .cs_description &gt; .num1 &gt; .cs_title, .csslider1 &gt; #cs_slide1_2:checked ~ .cs_description &gt; .num2 &gt; .cs_title { opacity: 1; visibility: visible; -webkit-transition: 750ms opacity 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -webkit-transform 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1200ms ease; -moz-transition: 750ms opacity 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -moz-transform 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1200ms ease; -ms-transition: 750ms opacity 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -ms-transform 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1200ms ease; -o-transition: 750ms opacity 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -o-transform 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1200ms ease; transition: 750ms opacity 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms transform 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1200ms ease; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } .csslider1 &gt; #cs_slide1_0:checked ~ .cs_description &gt; .num0 .cs_wrapper, .csslider1 &gt; #cs_slide1_1:checked ~ .cs_description &gt; .num1 .cs_wrapper, .csslider1 &gt; #cs_slide1_2:checked ~ .cs_description &gt; .num2 .cs_wrapper { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .csslider1 &gt; .cs_description &gt; label &gt; .cs_title { margin: 0px 10px; opacity: 0; visibility: hidden; z-index: 2; /* Fallback for web browsers that doesn't support RGBa */ background: #000; background-color: rgba(0,0,0,0.6); -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transition: 750ms opacity 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -webkit-transform 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 975ms ease; -moz-transition: 750ms opacity 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -moz-transform 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 975ms ease; -ms-transition: 750ms opacity 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -ms-transform 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 975ms ease; -o-transition: 750ms opacity 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -o-transform 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 975ms ease; transition: 750ms opacity 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms transform 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 975ms ease; } .csslider1 &gt; .cs_description &gt; label &gt; .cs_descr { font-size: 0.8em; margin: 1px 10px; opacity: 0; visibility: hidden; z-index: 1; background-color: #1FA5AD; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transition: 750ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: 750ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -moz-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -ms-transition: 750ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -ms-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: 750ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -o-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 750ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider1 &gt; .cs_description &gt; label &gt; .cs_title &gt; .cs_wrapper { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: 750ms opacity 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -webkit-transform 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: 750ms opacity 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -moz-transform 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -ms-transition: 750ms opacity 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -ms-transform 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: 750ms opacity 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -o-transform 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 750ms opacity 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms transform 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider1 &gt; .cs_description &gt; label &gt; .cs_descr &gt; .cs_wrapper { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 750ms opacity 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -webkit-transform 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: 750ms opacity 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -moz-transform 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -ms-transition: 750ms opacity 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -ms-transform 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: 750ms opacity 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -o-transform 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 750ms opacity 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms transform 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } /* calculate autoplay */ @-webkit-keyframes cs_descrWrapper { 3.0625%, 37.708333333333336% { z-index: 2; } 37.718333333333334%, 100% { z-index: 0; } } @-moz-keyframes cs_descrWrapper { 3.0625%, 37.708333333333336% { z-index: 2; } 37.718333333333334%, 100% { z-index: 0; } } @-ms-keyframes cs_descrWrapper { 3.0625%, 37.708333333333336% { z-index: 2; } 37.718333333333334%, 100% { z-index: 0; } } @-o-keyframes cs_descrWrapper { 3.0625%, 37.708333333333336% { z-index: 2; } 37.718333333333334%, 100% { z-index: 0; } } @keyframes cs_descrWrapper { 3.0625%, 37.708333333333336% { z-index: 2; } 37.718333333333334%, 100% { z-index: 0; } } .csslider1 &gt; #cs_play1:checked ~ .cs_description &gt; .num0 { -webkit-animation: cs_descrWrapper 12000ms infinite -1400ms ease; -moz-animation: cs_descrWrapper 12000ms infinite -1400ms ease; -ms-animation: cs_descrWrapper 12000ms infinite -1400ms ease; -o-animation: cs_descrWrapper 12000ms infinite -1400ms ease; animation: cs_descrWrapper 12000ms infinite -1400ms ease; } .csslider1 &gt; #cs_play1:checked ~ .cs_description &gt; .num1 { -webkit-animation: cs_descrWrapper 12000ms infinite 2600ms ease; -moz-animation: cs_descrWrapper 12000ms infinite 2600ms ease; -ms-animation: cs_descrWrapper 12000ms infinite 2600ms ease; -o-animation: cs_descrWrapper 12000ms infinite 2600ms ease; animation: cs_descrWrapper 12000ms infinite 2600ms ease; } .csslider1 &gt; #cs_play1:checked ~ .cs_description &gt; .num2 { -webkit-animation: cs_descrWrapper 12000ms infinite 6600ms ease; -moz-animation: cs_descrWrapper 12000ms infinite 6600ms ease; -ms-animation: cs_descrWrapper 12000ms infinite 6600ms ease; -o-animation: cs_descrWrapper 12000ms infinite 6600ms ease; animation: cs_descrWrapper 12000ms infinite 6600ms ease; } @-webkit-keyframes cs_title { 3.0625%, 30.260833333333334% { opacity: 1; -webkit-transform: rotateX(-9deg); z-index: 2; visibility: visible;} 4.375%, 28.948333333333334% { opacity: 1; -webkit-transform: rotateX(0deg); z-index: 2; visibility: visible;} 33.333333333333336% { opacity: 0; -webkit-transform: rotateX(90deg); z-index: 2; visibility: hidden;} 33.343333333333334%, 100% { z-index: 0; } } @-moz-keyframes cs_title { 3.0625%, 30.260833333333334% { opacity: 1; -moz-transform: rotateX(-9deg); z-index: 2; visibility: visible;} 4.375%, 28.948333333333334% { opacity: 1; -moz-transform: rotateX(0deg); z-index: 2; visibility: visible;} 33.333333333333336% { opacity: 0; -moz-transform: rotateX(90deg); z-index: 2; visibility: hidden;} 33.343333333333334%, 100% { z-index: 0; } } @-ms-keyframes cs_title { 3.0625%, 30.260833333333334% { opacity: 1; -ms-transform: rotateX(-9deg); z-index: 2; visibility: visible;} 4.375%, 28.948333333333334% { opacity: 1; -ms-transform: rotateX(0deg); z-index: 2; visibility: visible;} 33.333333333333336% { opacity: 0; -ms-transform: rotateX(90deg); z-index: 2; visibility: hidden;} 33.343333333333334%, 100% { z-index: 0; } } @-o-keyframes cs_title { 3.0625%, 30.260833333333334% { opacity: 1; -o-transform: rotateX(-9deg); z-index: 2; visibility: visible;} 4.375%, 28.948333333333334% { opacity: 1; -o-transform: rotateX(0deg); z-index: 2; visibility: visible;} 33.333333333333336% { opacity: 0; -o-transform: rotateX(90deg); z-index: 2; visibility: hidden;} 33.343333333333334%, 100% { z-index: 0; } } @keyframes cs_title { 3.0625%, 30.260833333333334% { opacity: 1; transform: rotateX(-9deg); z-index: 2; visibility: visible;} 4.375%, 28.948333333333334% { opacity: 1; transform: rotateX(0deg); z-index: 2; visibility: visible;} 33.333333333333336% { opacity: 0; transform: rotateX(90deg); z-index: 2; visibility: hidden;} 33.343333333333334%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr { 6.125%, 25.885833333333334% { opacity: 1; -webkit-transform: rotateX(9deg); z-index: 1; visibility: visible;} 8.75%, 24.573333333333334% { opacity: 1; -webkit-transform: rotateX(0deg); z-index: 1; visibility: visible;} 33.333333333333336% { opacity: 0; -webkit-transform: rotateX(-90deg); z-index: 1; visibility: hidden;} 33.343333333333334%, 100% { z-index: 0; } } @-moz-keyframes cs_descr { 6.125%, 25.885833333333334% { opacity: 1; -moz-transform: rotateX(9deg); z-index: 1; visibility: visible;} 8.75%, 24.573333333333334% { opacity: 1; -moz-transform: rotateX(0deg); z-index: 1; visibility: visible;} 33.333333333333336% { opacity: 0; -moz-transform: rotateX(-90deg); z-index: 1; visibility: hidden;} 33.343333333333334%, 100% { z-index: 0; } } @-ms-keyframes cs_descr { 6.125%, 25.885833333333334% { opacity: 1; -ms-transform: rotateX(9deg); z-index: 1; visibility: visible;} 8.75%, 24.573333333333334% { opacity: 1; -ms-transform: rotateX(0deg); z-index: 1; visibility: visible;} 33.333333333333336% { opacity: 0; -ms-transform: rotateX(-90deg); z-index: 1; visibility: hidden;} 33.343333333333334%, 100% { z-index: 0; } } @-o-keyframes cs_descr { 6.125%, 25.885833333333334% { opacity: 1; -o-transform: rotateX(9deg); z-index: 1; visibility: visible;} 8.75%, 24.573333333333334% { opacity: 1; -o-transform: rotateX(0deg); z-index: 1; visibility: visible;} 33.333333333333336% { opacity: 0; -o-transform: rotateX(-90deg); z-index: 1; visibility: hidden;} 33.343333333333334%, 100% { z-index: 0; } } @keyframes cs_descr { 6.125%, 25.885833333333334% { opacity: 1; transform: rotateX(9deg); z-index: 1; visibility: visible;} 8.75%, 24.573333333333334% { opacity: 1; transform: rotateX(0deg); z-index: 1; visibility: visible;} 33.333333333333336% { opacity: 0; transform: rotateX(-90deg); z-index: 1; visibility: hidden;} 33.343333333333334%, 100% { z-index: 0; } } .csslider1 &gt; #cs_play1:checked ~ .cs_description &gt; .num0 &gt; .cs_title, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; .num0 &gt; .cs_title { -webkit-animation: cs_title 12000ms infinite -1400ms ease; -moz-animation: cs_title 12000ms infinite -1400ms ease; -ms-animation: cs_title 12000ms infinite -1400ms ease; -o-animation: cs_title 12000ms infinite -1400ms ease; animation: cs_title 12000ms infinite -1400ms ease; } .csslider1 &gt; #cs_play1:checked ~ .cs_description &gt; .num1 &gt; .cs_title, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; .num1 &gt; .cs_title { -webkit-animation: cs_title 12000ms infinite 2600ms ease; -moz-animation: cs_title 12000ms infinite 2600ms ease; -ms-animation: cs_title 12000ms infinite 2600ms ease; -o-animation: cs_title 12000ms infinite 2600ms ease; animation: cs_title 12000ms infinite 2600ms ease; } .csslider1 &gt; #cs_play1:checked ~ .cs_description &gt; .num2 &gt; .cs_title, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; .num2 &gt; .cs_title { -webkit-animation: cs_title 12000ms infinite 6600ms ease; -moz-animation: cs_title 12000ms infinite 6600ms ease; -ms-animation: cs_title 12000ms infinite 6600ms ease; -o-animation: cs_title 12000ms infinite 6600ms ease; animation: cs_title 12000ms infinite 6600ms ease; } .csslider1 &gt; #cs_play1:checked ~ .cs_description &gt; .num0 &gt; .cs_descr, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; .num0 &gt; .cs_descr { -webkit-animation: cs_descr 12000ms infinite -1400ms ease; -moz-animation: cs_descr 12000ms infinite -1400ms ease; -ms-animation: cs_descr 12000ms infinite -1400ms ease; -o-animation: cs_descr 12000ms infinite -1400ms ease; animation: cs_descr 12000ms infinite -1400ms ease; } .csslider1 &gt; #cs_play1:checked ~ .cs_description &gt; .num1 &gt; .cs_descr, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; .num1 &gt; .cs_descr { -webkit-animation: cs_descr 12000ms infinite 2600ms ease; -moz-animation: cs_descr 12000ms infinite 2600ms ease; -ms-animation: cs_descr 12000ms infinite 2600ms ease; -o-animation: cs_descr 12000ms infinite 2600ms ease; animation: cs_descr 12000ms infinite 2600ms ease; } .csslider1 &gt; #cs_play1:checked ~ .cs_description &gt; .num2 &gt; .cs_descr, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; .num2 &gt; .cs_descr { -webkit-animation: cs_descr 12000ms infinite 6600ms ease; -moz-animation: cs_descr 12000ms infinite 6600ms ease; -ms-animation: cs_descr 12000ms infinite 6600ms ease; -o-animation: cs_descr 12000ms infinite 6600ms ease; animation: cs_descr 12000ms infinite 6600ms ease; } @-webkit-keyframes cs_title_text { 3.0625%, 30.260833333333334% { opacity: 1; -webkit-transform: translateX(-1%); } 4.375%, 28.948333333333334% { opacity: 1; -webkit-transform: translateX(0%); } 33.333333333333336% { opacity: 0; -webkit-transform: translateX(100%); } } @-moz-keyframes cs_title_text { 3.0625%, 30.260833333333334% { opacity: 1; -moz-transform: translateX(-1%); } 4.375%, 28.948333333333334% { opacity: 1; -moz-transform: translateX(0%); } 33.333333333333336% { opacity: 0; -moz-transform: translateX(100%); } } @-ms-keyframes cs_title_text { 3.0625%, 30.260833333333334% { opacity: 1; -ms-transform: translateX(-1%); } 4.375%, 28.948333333333334% { opacity: 1; -ms-transform: translateX(0%); } 33.333333333333336% { opacity: 0; -ms-transform: translateX(100%); } } @-o-keyframes cs_title_text { 3.0625%, 30.260833333333334% { opacity: 1; -o-transform: translateX(-1%); } 4.375%, 28.948333333333334% { opacity: 1; -o-transform: translateX(0%); } 33.333333333333336% { opacity: 0; -o-transform: translateX(100%); } } @keyframes cs_title_text { 3.0625%, 30.260833333333334% { opacity: 1; transform: translateX(-1%); } 4.375%, 28.948333333333334% { opacity: 1; transform: translateX(0%); } 33.333333333333336% { opacity: 0; transform: translateX(100%); } } @-webkit-keyframes cs_descr_text { 6.125%, 25.885833333333334% { opacity: 1; -webkit-transform: translateX(1%); } 8.75%, 24.573333333333334% { opacity: 1; -webkit-transform: translateX(0%); } 33.333333333333336% { opacity: 0; -webkit-transform: translateX(-100%); } } @-moz-keyframes cs_descr_text { 6.125%, 25.885833333333334% { opacity: 1; -moz-transform: translateX(1%); } 8.75%, 24.573333333333334% { opacity: 1; -moz-transform: translateX(0%); } 33.333333333333336% { opacity: 0; -moz-transform: translateX(-100%); } } @-ms-keyframes cs_descr_text { 6.125%, 25.885833333333334% { opacity: 1; -ms-transform: translateX(1%); } 8.75%, 24.573333333333334% { opacity: 1; -ms-transform: translateX(0%); } 33.333333333333336% { opacity: 0; -ms-transform: translateX(-100%); } } @-o-keyframes cs_descr_text { 6.125%, 25.885833333333334% { opacity: 1; -o-transform: translateX(1%); } 8.75%, 24.573333333333334% { opacity: 1; -o-transform: translateX(0%); } 33.333333333333336% { opacity: 0; -o-transform: translateX(-100%); } } @keyframes cs_descr_text { 6.125%, 25.885833333333334% { opacity: 1; transform: translateX(1%); } 8.75%, 24.573333333333334% { opacity: 1; transform: translateX(0%); } 33.333333333333336% { opacity: 0; transform: translateX(-100%); } } .csslider1 &gt; #cs_play1:checked ~ .cs_description &gt; .num0 .cs_title &gt; .cs_wrapper, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; .num0 .cs_title &gt; .cs_wrapper { -webkit-animation: cs_title_text 12000ms infinite -1190ms ease; -moz-animation: cs_title_text 12000ms infinite -1190ms ease; -ms-animation: cs_title_text 12000ms infinite -1190ms ease; -o-animation: cs_title_text 12000ms infinite -1190ms ease; animation: cs_title_text 12000ms infinite -1190ms ease; } .csslider1 &gt; #cs_play1:checked ~ .cs_description &gt; .num1 .cs_title &gt; .cs_wrapper, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; .num1 .cs_title &gt; .cs_wrapper { -webkit-animation: cs_title_text 12000ms infinite 2810ms ease; -moz-animation: cs_title_text 12000ms infinite 2810ms ease; -ms-animation: cs_title_text 12000ms infinite 2810ms ease; -o-animation: cs_title_text 12000ms infinite 2810ms ease; animation: cs_title_text 12000ms infinite 2810ms ease; } .csslider1 &gt; #cs_play1:checked ~ .cs_description &gt; .num2 .cs_title &gt; .cs_wrapper, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; .num2 .cs_title &gt; .cs_wrapper { -webkit-animation: cs_title_text 12000ms infinite 6810ms ease; -moz-animation: cs_title_text 12000ms infinite 6810ms ease; -ms-animation: cs_title_text 12000ms infinite 6810ms ease; -o-animation: cs_title_text 12000ms infinite 6810ms ease; animation: cs_title_text 12000ms infinite 6810ms ease; } .csslider1 &gt; #cs_play1:checked ~ .cs_description &gt; .num0 .cs_descr &gt; .cs_wrapper, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; .num0 .cs_descr &gt; .cs_wrapper { -webkit-animation: cs_descr_text 12000ms infinite -1190ms ease; -moz-animation: cs_descr_text 12000ms infinite -1190ms ease; -ms-animation: cs_descr_text 12000ms infinite -1190ms ease; -o-animation: cs_descr_text 12000ms infinite -1190ms ease; animation: cs_descr_text 12000ms infinite -1190ms ease; } .csslider1 &gt; #cs_play1:checked ~ .cs_description &gt; .num1 .cs_descr &gt; .cs_wrapper, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; .num1 .cs_descr &gt; .cs_wrapper { -webkit-animation: cs_descr_text 12000ms infinite 2810ms ease; -moz-animation: cs_descr_text 12000ms infinite 2810ms ease; -ms-animation: cs_descr_text 12000ms infinite 2810ms ease; -o-animation: cs_descr_text 12000ms infinite 2810ms ease; animation: cs_descr_text 12000ms infinite 2810ms ease; } .csslider1 &gt; #cs_play1:checked ~ .cs_description &gt; .num2 .cs_descr &gt; .cs_wrapper, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; .num2 .cs_descr &gt; .cs_wrapper { -webkit-animation: cs_descr_text 12000ms infinite 6810ms ease; -moz-animation: cs_descr_text 12000ms infinite 6810ms ease; -ms-animation: cs_descr_text 12000ms infinite 6810ms ease; -o-animation: cs_descr_text 12000ms infinite 6810ms ease; animation: cs_descr_text 12000ms infinite 6810ms ease; } .csslider1 &gt; #cs_play1:checked ~ .cs_description &gt; label &gt; .cs_title, .csslider1 &gt; #cs_play1:checked ~ .cs_description &gt; label &gt; .cs_descr, .csslider1 &gt; #cs_play1:checked ~ .cs_description &gt; label &gt; .cs_title &gt; .cs_wrapper, .csslider1 &gt; #cs_play1:checked ~ .cs_description &gt; label &gt; .cs_descr &gt; .cs_wrapper, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; label &gt; .cs_title, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; label &gt; .cs_descr, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; label &gt; .cs_title &gt; .cs_wrapper, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; label &gt; .cs_descr &gt; .cs_wrapper { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .csslider1.cs_pauseHover:hover &gt; .cs_description &gt; label &gt; .cs_title, .csslider1.cs_pauseHover:hover &gt; .cs_description &gt; label &gt; .cs_descr, .csslider1.cs_pauseHover:hover &gt; .cs_description &gt; label &gt; .cs_title &gt; .cs_wrapper, .csslider1.cs_pauseHover:hover &gt; .cs_description &gt; label &gt; .cs_descr &gt; .cs_wrapper, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; label &gt; .cs_title, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; label &gt; .cs_descr, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; label &gt; .cs_title &gt; .cs_wrapper, .csslider1 &gt; #cs_pause1:checked ~ .cs_description &gt; label &gt; .cs_descr &gt; .cs_wrapper { -webkit-animation-play-state: paused !important; -moz-animation-play-state: paused !important; -ms-animation-play-state: paused !important; -o-animation-play-state: paused !important; animation-play-state: paused !important; } /* stop */ .csslider1 &gt; .slide:checked ~ .cs_description &gt; label { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } /* /calculate autoplay *//* hide description &amp; bullets on mobile devices */ @media only screen and (max-width: 480px), only screen and (-webkit-max-device-pixel-ratio: 2) and (max-width: 480px), only screen and ( max--moz-device-pixel-ratio: 2) and (max-width: 480px), only screen and ( -o-max-device-pixel-ratio: 2/1) and (max-width: 480px), only screen and ( max-device-pixel-ratio: 2) and (max-width: 480px), only screen and ( max-resolution: 192dpi) and (max-width: 480px), only screen and ( max-resolution: 2dppx) and (max-width: 480px) { .csslider1 &gt; .cs_description, .csslider1 &gt; .cs_bullets { display: none; } }</pre> <p> 有人会说了,你这css也太多了吧,写你这么多css,我直接找个JS轮播图插件不就得了!对我们css同样有插件实现,现在也涌现出了一些css的插件及效果库,比较出名的animate.css、hover.css等等,我们轮播图同样有一款优秀的css插件,叫做cssSlider,这里就不贴出链接了,大家自行搜索学习。 </p> <p> </p> <p> 也可点击下载完整示例: </p> <p> </p> <p><a href="https://www.wangdahai.cn/wp-content/uploads/2017/10/纯css轮播图效果.zip">纯css轮播图效果</a></p>
本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 纯css的轮播图效果

评论 抢沙发

评论前必须登录!