8 500
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 581: | Linha 581: | ||
.slideshow-container { | .slideshow-container { | ||
display: block; | display: block; | ||
width: | max-width: 400px; | ||
position: relative; | position: relative; | ||
margin: auto; | margin: auto; | ||
Linha 589: | Linha 588: | ||
.slide { | .slide { | ||
display: | display: none; | ||
position: absolute; | position: absolute; | ||
width: 100%; | width: 100%; | ||
height: 300px; /* Altura da imagem */ | height: 300px; /* Altura da imagem */ | ||
} | } | ||
Linha 608: | Linha 605: | ||
} | } | ||
/* | /* Animação do slideshow usando :target */ | ||
. | .slide:target { | ||
display: block; | |||
animation: fade 6s; | |||
} | } | ||
@keyframes fade { | |||
0%, 20% { | |||
opacity: 0; | |||
} | |||
25%, 100% { | |||
opacity: 1; | |||
} | |||
} | } | ||
. | /* Timer para avançar automaticamente */ | ||
.slideshow-container { | |||
animation: change-slide 18s infinite; | |||
} | } | ||
@keyframes change-slide { | |||
0%, 33.33% { | |||
target: #slide1; | |||
} | |||
33.33%, 66.66% { | |||
target: #slide2; | |||
} | } | ||
66.66%, 100% { | |||
target: #slide3; | |||
} | } | ||
} | } |