如何使此CSS滑块仅作为自动播放？
[英]How make this CSS slider only as AutoPlay?
问题描述
It is possible make this slider as autoplay, even if it will be without LESS, just simple CSS? 
即使没有LESS，也可以将这个滑块设为自动播放，只是简单的CSS？ Author of this slider using LESS, but in my case I will use his simple CSS. 该滑块的作者使用LESS，但在我的情况下，我将使用他的简单CSS。 But if I am correct there must be somewhere @animation to make this as autoplay, right? 但是，如果我是正确的话，那么必须在某处设置@animation才能使其成为自动播放，对吗？
Codepen: https://codepen.io/drygiel/pen/rtpnE Codepen： https ：//codepen.io/drygiel/pen/rtpnE
Thank you, 谢谢，
Here is simple CSS, without LESS: 这是简单的CSS，没有LESS：
.csslider {
-moz-perspective: 1300px;
-ms-perspective: 1300px;
-webkit-perspective: 1300px;
perspective: 1300px;
display: inline-block;
text-align: left;
position: relative;
margin-bottom: 22px;
}
.csslider > input {
display: none;
}
.csslider > input:nth-of-type(10):checked ~ ul li:first-of-type {
margin-left: -900%;
}
.csslider > input:nth-of-type(9):checked ~ ul li:first-of-type {
margin-left: -800%;
}
.csslider > input:nth-of-type(8):checked ~ ul li:first-of-type {
margin-left: -700%;
}
.csslider > input:nth-of-type(7):checked ~ ul li:first-of-type {
margin-left: -600%;
}
.csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {
margin-left: -500%;
}
.csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {
margin-left: -400%;
}
.csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {
margin-left: -300%;
}
.csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {
margin-left: -200%;
}
.csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {
margin-left: -100%;
}
.csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {
margin-left: 0%;
}
.csslider > ul {
position: relative;
width: 820px;
height: 420px;
z-index: 1;
font-size: 0;
line-height: 0;
background-color: #3a3a3a;
border: 10px solid #3a3a3a;
margin: 0 auto;
padding: 0;
overflow: hidden;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.csslider > ul > li {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
-moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
vertical-align: top;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: normal;
}
.csslider > ul > li.scrollable {
overflow-y: scroll;
}
.csslider > .navigation {
position: absolute;
bottom: -8px;
left: 50%;
z-index: 10;
margin-bottom: -10px;
font-size: 0;
line-height: 0;
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;
}
.csslider > .navigation > div {
margin-left: -100%;
}
.csslider > .navigation label {
position: relative;
display: inline-block;
cursor: pointer;
border-radius: 50%;
margin: 0 4px;
padding: 4px;
background: #3a3a3a;
}
.csslider > .navigation label:hover:after {
opacity: 1;
}
.csslider > .navigation label:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
margin-left: -6px;
margin-top: -6px;
background: #71ad37;
border-radius: 50%;
padding: 6px;
opacity: 0;
}
.csslider > .arrows {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider.inside .navigation {
bottom: 10px;
margin-bottom: 10px;
}
.csslider.inside .navigation label {
border: 1px solid #7e7e7e;
}
.csslider > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1):after,
.csslider > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2):after,
.csslider > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3):after,
.csslider > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4):after,
.csslider > input:nth-of-type(5):checked ~ .navigation label:nth-of-type(5):after,
.csslider > input:nth-of-type(6):checked ~ .navigation label:nth-of-type(6):after,
.csslider > input:nth-of-type(7):checked ~ .navigation label:nth-of-type(7):after,
.csslider > input:nth-of-type(8):checked ~ .navigation label:nth-of-type(8):after,
.csslider > input:nth-of-type(9):checked ~ .navigation label:nth-of-type(9):after,
.csslider > input:nth-of-type(10):checked ~ .navigation label:nth-of-type(10):after,
.csslider > input:nth-of-type(11):checked ~ .navigation label:nth-of-type(11):after {
opacity: 1;
}
.csslider > .arrows {
position: absolute;
left: -31px;
top: 50%;
width: 100%;
height: 26px;
padding: 0 31px;
z-index: 0;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.csslider > .arrows label {
display: none;
position: absolute;
top: -50%;
padding: 13px;
box-shadow: inset 2px -2px 0 1px #3a3a3a;
cursor: pointer;
-moz-transition: .15s;
-o-transition: .15s;
-webkit-transition: .15s;
transition: .15s;
}
.csslider > .arrows label:hover {
box-shadow: inset 3px -3px 0 2px #71ad37;
margin: 0 0px;
}
.csslider > .arrows label:before {
content: '';
position: absolute;
top: -100%;
left: -100%;
height: 300%;
width: 300%;
}
.csslider.infinity > input:first-of-type:checked ~ .arrows label:last-of-type,
.csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(0),
.csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(1),
.csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(2),
.csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(3),
.csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(4),
.csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(5),
.csslider > input:nth-of-type(7):checked ~ .arrows label:nth-of-type(6),
.csslider > input:nth-of-type(8):checked ~ .arrows label:nth-of-type(7),
.csslider > input:nth-of-type(9):checked ~ .arrows label:nth-of-type(8),
.csslider > input:nth-of-type(10):checked ~ .arrows label:nth-of-type(9),
.csslider > input:nth-of-type(11):checked ~ .arrows label:nth-of-type(10) {
display: block;
left: 0;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.csslider.infinity > input:last-of-type:checked ~ .arrows label:first-of-type,
.csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(2),
.csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(3),
.csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(4),
.csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(5),
.csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(6),
.csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(7),
.csslider > input:nth-of-type(7):checked ~ .arrows label:nth-of-type(8),
.csslider > input:nth-of-type(8):checked ~ .arrows label:nth-of-type(9),
.csslider > input:nth-of-type(9):checked ~ .arrows label:nth-of-type(10),
.csslider > input:nth-of-type(10):checked ~ .arrows label:nth-of-type(11),
.csslider > input:nth-of-type(11):checked ~ .arrows label:nth-of-type(12) {
display: block;
right: 0;
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
/*#region MODULES */
/*#endregion */
1 个解决方案
解决方案1
4 已采纳 2016-10-18 05:21:44
Auto-play is possible to achieve by JS or CSS3 animations. 通过JS或CSS3动画可以实现自动播放。
Here is a demo : 这是一个演示 ：
http://codepen.io/drygiel/pen/xjJsC http://codepen.io/drygiel/pen/xjJsC
Source of this answer: 该答案的来源：
https://github.com/drygiel/csslider/issues/1 https://github.com/drygiel/csslider/issues/1
(By the author: Damian Drygiel) （作者：达米安·德瑞吉尔）
CODE: 码：
- var config = {
- count: 6, // total count of slides in this slider
- default_slide: 1, // slide showed by default
- infinity: true, // if true navigation arrows never disapears
- inside: false, // if true navigation dots apears inside of slider box
- group_name: 'slides', // each slider on page has to have another group name
- presentation_mode: false, // if false generates skeleton only
- }
if(config.presentation_mode)
h1(style="padding-top: 60px;") CSS Slider
h2 Pure CSS Slider. No JS. Because it is possieble!
- var _list = new Array(config.count);
div.csslider#slider1(class=(config.inside? 'inside ':'') + (config.infinity? 'infinity':''))
each _ , i in _list
input(type='radio',
name=config.group_name,
checked=(config.default_slide == i+1),
id=config.group_name+'_'+(i+1))
ul
each _ , i in _list
if(config.presentation_mode)
li(class=(i==3? 'scrollable':''))
case i
when 0
h1 Say hello to CSS3
p CSSlider is lightweight & easy to use slider. No JS - pure CSS.
when 1
img(src='http://rawgithub.com/drygiel/csslider/master/examples/themes/stones.jpg')
when 2
div#bg
div
h1 CSS Events
p When slide 3 is reached - play CSS animation!
when 3
h1 Lots of text
h2 Scrollable one
p.
Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi,
semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi,
semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi,
semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi,
semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi,
semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi,
semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
when 4
div#center
a.nice-link(href='https://github.com/drygiel/csslider',
data-text='More examples on github',
target='_blank') More examples on github
when 5
div#center
a#dex-sign.play(href='http://drygiel.com', target='_blank')
default
| Slide #{i+1}
else
li Slide #{i+1}
div.arrows
each _ , i in _list
label(for=config.group_name+'_'+(i+1))
label(for=config.group_name+'_'+(1), class="goto-first")
label(for=config.group_name+'_'+(config.count), class="goto-last")
div.navigation
div
each _ , i in _list
label(for=config.group_name+'_'+(i+1))
if(config.presentation_mode)
a(href='https://github.com/drygiel', target='_blank')
img(style='position: absolute; top: 0; left: 0; border: 0;',
src='https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png',
alt='Fork me on GitHub')
css: CSS：
// CONFIG
// Main
@border-size: 10px;
@slider-inner-width: 800px;
@slider-inner-height: 400px;
// CODEPEN: Did you know that if you put cursor (caret) in color #text and press [ALT] key you can choose color form picker?
@slider-main-color: #71ad37;
@slider-back-color: #3A3A3A;
@max-slides: 10;
// Dot
@dot-outer-size: 4px;
@dot-inner-size: 6px;
@dot-distance: 4px;
@dot-distance-top: 10px;
@dot-main-color: @slider-main-color;
@dot-back-color: @slider-back-color;
// Arrow
@arrow-type: 'lite'; // standard | lite
@arrow-size: 13px;
@arrow-distance: 15px;
@arrow-hover-shift: 0px;
@arrow-color: @slider-back-color;
@arrow-hover-color: @slider-main-color;
@speed: .5s;
@easing: cubic-bezier(.4,1.3,.65,1); // ease-out
.csslider {
-moz-perspective: 1300px;
-ms-perspective: 1300px;
-webkit-perspective: 1300px;
perspective: 1300px;
display: inline-block;
text-align: left;
position: relative;
margin-bottom: @dot-distance + @dot-distance-top + 2 * @dot-outer-size;
> input {
display: none;
.loopingClass (@index) when (@index > 0) {
&:nth-of-type(@{index}):checked ~ ul li:first-of-type {
margin-left: -100% * (@index - 1);
}
.loopingClass(@index - 1);
}
.loopingClass(@max-slides);
}
> ul {
position: relative;
width: @slider-inner-width + 2 * @border-size;
height: @slider-inner-height + 2 * @border-size;
z-index: 1;
font-size: 0;
line-height: 0;
background-color: @slider-back-color;
border: @border-size solid @slider-back-color;
margin: 0 auto;
padding: 0;
overflow: hidden;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
> li {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
-moz-transition: all @speed @easing;
-o-transition: all @speed ease-out;
-webkit-transition: all @speed @easing;
transition: all @speed @easing;
vertical-align: top;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: normal;
&.scrollable {
overflow-y: scroll;
}
}
}
> .navigation {
position: absolute;
bottom: -2 * @dot-outer-size;
left: 50%;
z-index: 10;
margin-bottom: -@dot-distance-top;
font-size: 0;
line-height: 0;
text-align: center;
.noSelect();
> div {
margin-left: -100%;
}
label {
position: relative;
display: inline-block;
cursor: pointer;
border-radius: 50%;
margin: 0 @dot-distance;
padding: @dot-outer-size;
background: @dot-back-color;
&:hover:after {
opacity: 1;
}
&:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
margin-left: -@dot-inner-size;
margin-top: -@dot-inner-size;
background: @dot-main-color;
border-radius: 50%;
padding: @dot-inner-size;
opacity: 0;
}
}
}
> .arrows {
.noSelect();
.goto-first,
.goto-last {
}
}
&.inside .navigation {
bottom: @border-size;
margin-bottom: @dot-distance-top;
label {
border: 1px solid #7e7e7e;
}
}
}
& {
.repeat('.csslider > input:nth-of-type( $i ):checked ~ .navigation label:nth-of-type( $i ):after,');
@{result}
{
opacity: 1;
}
}
.render-arrow();
.repeat(@pattern) {
@to_repeat: ~'@{pattern}';
@result: ~`(function(){
var result = '';
for(var i=1; i < @{max-slides} + 2; i++) {
result += "@{to_repeat}\n"
.replace(/\s*\$im1\s*/g, i - 1)
.replace(/\s*\$ip1\s*/g, i + 1)
.replace(/\s*\$i\s*/g, i);
}
return result.replace(/[,\s]+$/,'');
})()`;
}
.noSelect() {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*#region MODULES */
.render-arrow () when (@arrow-type = 'lite') {
@arrow-thickness: 2px;
@arrow-thickness-hover: 3px;
.csslider > .arrows {
position: absolute;
left: -@arrow-size - 3px - @arrow-distance;
top: 50%;
width: 100%;
height: 2 * @arrow-size;
padding: 0 @arrow-size + 3px + @arrow-distance;
z-index: 0;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
label {
display: none;
position: absolute;
top: -50%;
padding: @arrow-size;
box-shadow: inset @arrow-thickness -@arrow-thickness 0 (@arrow-thickness - 1px) @arrow-color;
cursor: pointer;
-moz-transition: box-shadow .15s, margin .15s;
-o-transition: box-shadow .15s, margin .15s;
-webkit-transition: box-shadow .15s, margin .15s;
transition: box-shadow .15s, margin .15s;
&:hover {
box-shadow: inset @arrow-thickness-hover -@arrow-thickness-hover 0 (@arrow-thickness-hover - 1px) @arrow-hover-color;
margin: 0 -@arrow-hover-shift;
}
&:before {
content: '';
position: absolute;
top: -100%;
left: -100%;
height: 300%;
width: 300%;
}
}
}
// Left conditions
& {
.repeat('.csslider > input:nth-of-type( $i ):checked ~ .arrows > label:nth-of-type( $im1 ),');
.csslider.infinity > input:first-of-type:checked ~ .arrows label.goto-last,
@{result}
{
display: block;
left: 0;
right: auto;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
// Right conditions
& {
.repeat('.csslider > input:nth-of-type( $i ):checked ~ .arrows > label:nth-of-type( $ip1 ),');
.csslider.infinity > input:last-of-type:checked ~ .arrows label.goto-first,
@{result}
{
display: block;
right: 0;
left: auto;
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
}
}
.render-arrow () when (@arrow-type = 'standard') {
.csslider > .arrows {
position: absolute;
left: -@arrow-size - @arrow-distance + 2px;
top: 50%;
width: 100%;
height: 2 * @arrow-size;
padding: 0 @arrow-size + @arrow-distance - 2px;
z-index: 0;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
label {
display: none;
position: absolute;
top: -50%;
width: 0;
height: 0;
border-top: @arrow-size solid transparent;
border-bottom: @arrow-size solid transparent;
border-left: @arrow-size solid @arrow-color;
border-right: @arrow-size solid @arrow-color;
cursor: pointer;
-moz-transition: margin .15s;
-o-transition: margin .15s;
-webkit-transition: margin .15s;
transition: margin .15s;
&:hover {
border-left-color: @arrow-hover-color;
border-right-color: @arrow-hover-color;
margin: 0 -@arrow-hover-shift;
}
&:before {
content: '';
position: absolute;
top: -@arrow-size;
left: -@arrow-size - @arrow-hover-shift - @arrow-distance;
height: @arrow-size*2;
width: 2 * (@arrow-size + @arrow-distance + @arrow-hover-shift);
}
}
}
// Left conditions
& {
.repeat('.csslider > input:nth-of-type( $i ):checked ~ .arrows > label:nth-of-type( $im1 ),');
.csslider.infinity > input:first-of-type:checked ~ .arrows label.goto-last,
@{result}
{
display: block;
left: 0;
right: auto;
border-left: none;
}
}
// Right conditions
& {
.repeat('.csslider > input:nth-of-type( $i ):checked ~ .arrows > label:nth-of-type( $ip1 ),');
.csslider.infinity > input:last-of-type:checked ~ .arrows label.goto-first,
@{result}
{
display: block;
right: 0;
left: auto;
border-right: none;
}
}
}
/*#endregion */
/*___________________________________ LAYOUT ___________________________________ */
@import url(http://fonts.googleapis.com/css?family=Raleway:400,700|Lato);
* {
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 2px;
background: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar-thumb {
background: rgba(74, 168, 0, 0.6);
}
ul, ol {
padding-left: 40px;
}
html, body {
height: 100%;
overflow-x: hidden;
text-align: center;
font: 400 100% 'Raleway', 'Lato';
background-color: #282828;
color: #CCC;
}
body {
padding-bottom: 60px;
}
h1 {
font-weight: 700;
font-size: 310%;
}
h2 {
font-weight: 400;
font-size: 120%;
color: #71AD37;
}
#slider1 {
margin: 20px;
font-family: 'Lato';
}
#slider1 > ul > li:nth-of-type(3) {
background: url(https://raw.github.com/drygiel/csslider/master/examples/themes/fruit.jpg);
}
// On Slide 3 Reached Event
// Transition is added here to instantly hide when slide is changed
#slider1 > input:nth-of-type(3):checked ~ ul #bg {
width: 80%;
padding: 22px;
-moz-transition: .5s .5s;
-o-transition: .5s .5s;
-webkit-transition: .5s .5s;
transition: .5s .5s;
}
#slider1 > input:nth-of-type(3):checked ~ ul #bg div {
-moz-transform: translate(0);
-ms-transform: translate(0);
-o-transform: translate(0);
-webkit-transform: translate(0);
transform: translate(0);
-moz-transition: .5s .9s;
-o-transition: .5s .9s;
-webkit-transition: .5s .9s;
transition: .5s .9s;
}
#slider1 > input:nth-of-type(6):checked ~ ul #dex-sign
{
-moz-animation: sign-anim @sign-duration .5s steps(@sign-frames) forwards;
-o-animation: sign-anim @sign-duration .5s steps(@sign-frames) forwards;
-webkit-animation: sign-anim @sign-duration .5s steps(@sign-frames) forwards;
animation: sign-anim @sign-duration .5s steps(@sign-frames) forwards;
}
#bg {
color: #000;
padding: 22px 0;
position: absolute;
left: 0;
top: 16%;
height: 20%;
width: 0;
z-index: 10;
overflow: hidden;
}
// Blurry background
#bg:before {
content: '';
position: absolute;
left: -1px;
top: 1px;
height: 100%;
width: 100%;
z-index: -1;
background: url(https://raw.github.com/drygiel/csslider/master/examples/themes/fruit.jpg) 1px 23%;
-webkit-filter: blur(7px);
}
#bg:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 20;
background: rgba(0, 0, 0, 0.35);
pointer-events: none;
}
#bg div {
-moz-transform: translate(120%);
-ms-transform: translate(120%);
-o-transform: translate(120%);
-webkit-transform: translate(120%);
transform: translate(120%);
}
.scrollable p {
padding: 30px;
text-align: justify;
line-height: 140%;
font-size: 120%;
}
#center {
text-align: center;
margin-top: 25%;
a {
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
font-variant: small-caps;
}
}
/*___________________________________ LINK ___________________________________ */
// More info here: http://codepen.io/drygiel/pen/hkgGq
a.nice-link {
@color: @slider-main-color;
@hover-color: lighten(spin(saturate(@color, 50%), -8), 8%);
position: relative;
color: @color;
h1 &:after {
border-bottom: 1px solid @hover-color; // Underline
}
&:after {
text-align: justify;
display: inline-block;
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: @hover-color;
min-height: 100%;
width: 0;
max-width: 100%; // 'cause of IE bug
background: @slider-back-color;
-moz-transition: .3s;
-o-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
}
&:hover {
color: @color; // To override default hover color
&:after {
width: 100%;
}
}
}
/*___________________________________ SIGN ___________________________________ */
// More info here: http://codepen.io/drygiel/pen/KbhmA
@sign-x: 255px;
@sign-y: 84px;
@sign-frames: 85;
@sign-duration: 3.5s;
@sign-total: @sign-frames * -@sign-y;
#dex-sign {
width: @sign-x;
height: @sign-y;
position: absolute;
left: 33%;
top: 45%;
opacity: .7;
background: url(http://www.drygiel.com/projects/sign/frames-255-white.png) 0 0 no-repeat;
&:hover {
opacity: 1;
-webkit-filter: ~'invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(45deg)';
}
}
@-webkit-keyframes sign-anim {
to {
background-position: 0 @sign-total;
}
}
@-moz-keyframes sign-anim {
to {
background-position: 0 @sign-total;
}
}
@keyframes sign-anim {
to {
background-position: 0 @sign-total;
}
}
JS: JS：
// Autoplay
setInterval(function() {
var $curr = $('#slider1 input[type=radio]:checked');
var $next = $curr.next('input');
if(!$next.length) $next = $('#slider1 input[type=radio]').first();
$next.prop('checked', true);
}, 2000);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使CSS Slider自动播放 - How to make CSS Slider to autoplay
如何让这个滑块自动播放？ - How to make this slider autoplay?
使用纯CSS使此滑块自动播放 - Make this slider autoplay with pure css
如何使图像滑块自动播放？ - How to make an image slider as autoplay?
在CSS滑块上添加自动播放 - Add autoplay on CSS slider
CSS - Slick Slider 与自动播放同步 - CSS - Slick Slider Syncing with autoplay
纯 CSS Slider 带导航和自动播放 - Pure CSS Slider with Navigation and Autoplay
如何向此滑块添加自动播放 - How to add autoplay to this slider
如何使此滑块自动播放图像而不是单击 - how to make this slider autoplay the images rather than click
光滑的 slider：如何使光滑的 slider 与父 div 一样大，只有 CSS - Slick slider: How to make slick slider as big as parent div with only CSS
相关标签