Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Accueil BlogDémonstrationsCSSLightbox/slideshow/slider...
Partagez cette démonstration : Partager sur Facebook Partager sur Twitter

CSS Motion Path modal

Dernière modification : septembre 2022

Ci-dessous une petite démonstration d'une boîte de dialogue avec CSS Path motion :

Le code :



<input name="modal" type="checkbox" id="modal">
<label for="modal">ouvrir 

<span class="trait"></span>
<span class="trait"></span>
<span class="trait"></span>
<span class="trait"></span>
<span class="trait"></span>
<span class="trait"></span>
<span class="trait"></span>
<span class="trait"></span>

</label>


<div class="modal">
<label for="modal" aria-label="fermer fenêtre"><svg height="40" width="40" viewBox="0 0 50 50"><circle cx="25" cy="25" r="22.5" fill="hsla(0, 0%, 0%, 0.8)"/><path fill="none" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M16 34l9-9 9-9M16 16l9 9 9 9"/></svg></label>
<h2>CSS Motion Paths modal</h2>
<div class="contenu_modal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis deserunt corrupti, ut fugit magni qui quasi nisi amet repellendus non fuga omnis a sed impedit explicabo accusantium nihil doloremque consequuntur.</div>
</div>


	

*,*::before,*::after{box-sizing:border-box}

input[type="checkbox"]{

position: absolute;
left: -100vw

}

input[name="modal"]+label {

position: relative;
display: inline-flex;
padding: 1.5rem 4.5rem;
background-color: #6753ea;
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);
color: white;
font-size: 1.25rem;
text-transform: uppercase;

}

.modal{ 

transform: scale(0);
opacity: 0;
height: 0;
visibility: hidden;
offset-distance: 100%;      
offset-rotate: 0;
filter: blur(8px);
offset-path:path("M 200,0 S 300,-500 -700,-200");
}


#modal:checked ~ .modal{

display:grid;
max-width: 400px;  
height: auto;
offset-distance: 0;  
offset-rotate:0deg; 
background-color: white;
border: 1px solid #ccc;
transition: 1s ease-out;
box-shadow: 0 0 2rem hsla(0,0%,0%,.2);
filter: blur(0);
opacity: 1;
visibility: visible;
transform: scale(1)

}
    
/*on enlève l'effet si l'utilisateur choisit d'enlever les animations motion*/    
@media (prefers-reduced-motion) {

@supports (offset-rotate: 0deg) {
.modal {
offset-path: none;
    }
  }
}
    
    
.modal h2{

border-bottom:1px solid #ccc;


}
    
.modal h2,
.contenu_modal {padding: 1rem}


/*fermer modal*/
.modal label{

justify-self: end;
display: flex;
align-items: center

}
     

/*décoration bouton*/
.trait{
position:absolute;
display:block;
height:10px;
transform-origin:5px 5px;
pointer-events:none}
    
.trait:nth-child(1){
top:50%;
left:100%;
transform:translate3d(-10px,-5px,0)}
    
.trait:nth-child(2){
bottom:0;
left:100%;
transform:translate3d(-10px,0,0) rotate(45deg)}
    
.trait:nth-child(3){
bottom:0;
left:50%;
transform:translate3d(-10px,0,0) rotate(90deg)}
    
.trait:nth-child(4){
bottom:0;
left:0;
transform:rotate(135deg)}
    
.trait:nth-child(5){
top: 50%;
left: 0;
transform: translate3d(0, -5px, 0) rotate(180deg)}
    
.trait:nth-child(6){
top:0;
left:0;
transform:rotate(225deg)}
    
.trait:nth-child(7){
top:0;
left:50%;
transform:translate3d(0,0,0) rotate(270deg)}
    
.trait:nth-child(8){
top:0;
left:100%;
transform:translate3d(-10px, 0, 0) rotate(315deg)}
    
.trait:before{

content: '';
position: absolute;
display: block;
width: 16px;
height: 2px;
background-color: #6753ea;
offset-path: path("M0 1c7.1 0 10.7 2 14.3 4s7.1 4 14.3 4 10.7-2 14.3-4 7.2-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4 10.7-2 14.3-4 7.1-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4 10.7-2 14.3-4 7.1-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4");
offset-distance: 0;
pointer-events: none

}

input[name="modal"]:checked+label .trait::before {

animation: trait 1s cubic-bezier(0.215, 0.61, 0.355, 1)

}



@keyframes trait {
from{
offset-distance: 0%;
opacity: 1;
filter: blur(0)
}

to {

offset-distance: 100%;
opacity: 0;
filter: blur(2px)

  }
  
}   




Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.