Origami

<div style="width:1200px; height:675px; margin:50px 0px 50px -22px;">

<p id="sv">Survol</p>

<p id="ori0">&nbsp;</p>

<p id="ori1" class="gami">&nbsp;</p> 

<p id="ori2" class="gami">&nbsp;</p>

<p id="ori3" class="gami">&nbsp;</p>

<p id="ori4" class="gami">&nbsp;</p>

<p id="ori5" class="gami">&nbsp;</p>

<p id="ori6" class="gami">&nbsp;</p>

<p id="ori7" class="gami">&nbsp;</p>

<p id="ori8" class="gami">&nbsp;</p>

<p id="ori9" class="gami">&nbsp;</p>  

</div>

<style><!--

#sv{position:absolute; z-index:1; width:120px; font-size:35px; transform:translate(50px,50px);}

#ori0{position:absolute; z-index:1; width:1200px; height:674px; margin-top:0px;}

.gami{position:absolute; z-index:1; width:1200px; height:674px; margin-top:0px; background:url('https://i.goopics.net/f1aj1i.jpg');}

#ori1{clip-path:circle(100px);z-index:5;transition:all 1s 1.6s;}

#ori2{clip-path:polygon(350px 337px, 500px 287px, 500px 387px); transition:all 1s 0s;}

#ori3{clip-path:polygon(550px 237px, 650px 237px, 600px 87px); transition:all 1s 0.2s;}

#ori4{clip-path:polygon(700px 287px, 850px 337px, 700px 387px); transition:all 1s 0.4s;}

#ori5{clip-path:polygon(550px 437px, 650px 437px, 600px 587px); transition:all 1s 0.6s;}

#ori6{clip-path:polygon(500px 290px, 550px 240px, 450px 200px); transition:all 1s 0.8s;}

#ori7{clip-path:polygon(700px 290px, 650px 240px, 750px 200px); transition:all 1s 1s;}

#ori8{clip-path:polygon(700px 387px, 650px 437px, 750px 487px); transition:all 1s 1.2s;}

#ori9{clip-path:polygon(500px 387px, 550px 437px, 450px 487px); transition:all 1s 1.4s;} 

#ori0:hover{z-index:10;margin-top:0px;}

#ori0:hover~#ori1{clip-path:circle(1200px);}  

#ori0:hover~#ori2{clip-path:polygon(0px 0px, 300px 0px, 0px 337px);}

#ori0:hover~#ori3{clip-path:polygon(900px 0px, 1200px 0px, 1200px 337px);}

#ori0:hover~#ori4{clip-path:polygon(1200px 337px, 1200px 675px, 900px 675px);}

#ori0:hover~#ori5{clip-path:polygon(0px 300px, 300px 675px, 0px 675px);} 

#ori0:hover~#ori6{clip-path:polygon(300px 0px, 300px 675px,0px 337px);}

#ori0:hover~#ori7{clip-path:polygon(300px 0px, 900px 0px,600px 187px);}

#ori0:hover~#ori8{clip-path:polygon(900px 0px, 1200px 337px,900px 675px);}

#ori0:hover~#ori9{clip-path:polygon(300px 675px, 600px 517px,900px 675px);}  

--></style>

Survol

 

 

 

 

 

 

 

 

 

 

Aucun commentaire: