Slide show code html
Fermé
bombero-11
Messages postés
459
Date d'inscription
samedi 11 octobre 2008
Statut
Membre
Dernière intervention
12 mai 2019
-
18 janv. 2017 à 17:39
a.brice - 20 janv. 2017 à 17:37
a.brice - 20 janv. 2017 à 17:37
A voir également:
- Slide show code html
- Code asci - Guide
- Editeur html - Télécharger - HTML
- Code puk bloqué - Guide
- Code telephone oublié - Guide
- Code blocks free - Télécharger - Langages
1 réponse
code html
<ul class="slideshow1">
<li><img src=""quot;votre_image" alt></li>
<li><img src=""quot;votre_image" alt></li>
<li><img src=""quot;votre_image" alt></li>
</ul>
code css
slideshow1 [src]{
position:absolute;
opacity:0;
left:0;
-webkit-mask-image:linear-gradient(45deg,hsl(0,0%,0%) 47%,transparent 52%);
-webkit-mask-size:300% 100%;
animation:slide 9s linear infinite}
.slideshow1{
list-style:none;
position:relative;
overflow:hidden;
width:600px;
height:400px;
margin:auto;
border:10px solid #fff;
box-shadow:0 1px 4px hsla(0,0%,0%,.4)}
.slideshow1 [src=""quot;../../astuces/tuto_diapo_css/2.jpg"]{animation-delay:3s}
.slideshow1 [src=""quot;../../astuces/tuto_diapo_css/3.jpg"]{animation-delay:6s}
@keyframes slide{
12%{opacity:1}
25%{opacity:1;-webkit-mask-position:0}
32%{opacity:0;-webkit-mask-position:100%}
100%{opacity:0}}
il faut connaitre les animation css3 pour comprendre ce que je fais
<ul class="slideshow1">
<li><img src=""quot;votre_image" alt></li>
<li><img src=""quot;votre_image" alt></li>
<li><img src=""quot;votre_image" alt></li>
</ul>
code css
slideshow1 [src]{
position:absolute;
opacity:0;
left:0;
-webkit-mask-image:linear-gradient(45deg,hsl(0,0%,0%) 47%,transparent 52%);
-webkit-mask-size:300% 100%;
animation:slide 9s linear infinite}
.slideshow1{
list-style:none;
position:relative;
overflow:hidden;
width:600px;
height:400px;
margin:auto;
border:10px solid #fff;
box-shadow:0 1px 4px hsla(0,0%,0%,.4)}
.slideshow1 [src=""quot;../../astuces/tuto_diapo_css/2.jpg"]{animation-delay:3s}
.slideshow1 [src=""quot;../../astuces/tuto_diapo_css/3.jpg"]{animation-delay:6s}
@keyframes slide{
12%{opacity:1}
25%{opacity:1;-webkit-mask-position:0}
32%{opacity:0;-webkit-mask-position:100%}
100%{opacity:0}}
il faut connaitre les animation css3 pour comprendre ce que je fais
