Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Last active April 26, 2020 22:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/04125438d5578090f7dd7e1bccd12c6f to your computer and use it in GitHub Desktop.
Save CodeMyUI/04125438d5578090f7dd7e1bccd12c6f to your computer and use it in GitHub Desktop.
Clip blinds
<div id="background" class="clip"></div>
<div id="clip3" class="clip"></div>
<div id="clip4" class="clip"></div>
<div id="clipa" class="clip"></div>
<div id="clip1" class="clip"></div>
<div id="clip2" class="clip"></div>
<div id="clipb" class="clip"></div>
html, body{
height:100%;
margin:0px;
}
@keyframes clip1{
0%{clip-path: polygon(0% -50%, 50% -50%, -50% 50%, -100% 50% );}
100%{clip-path: polygon(150% 50%, 200% 50%, 100% 150%, 50% 150%);}
}
@keyframes clipa{
0%{clip-path: polygon(-5% -55%, 55% -45%, -45% 55%, -95% 55% );}
100%{clip-path: polygon(150% 50%, 200% 50%, 100% 150%, 50% 150%);}
}
@keyframes clip2{
0%{clip-path: polygon(50% -50%, 100% -50%, 200% 50%, 150% 50%);}
100%{clip-path: polygon(-100% 50%, -50% 50%, 50% 150%, 0% 150%);}
}
@keyframes clipb{
0%{clip-path: polygon(40% -60%, 100% -50%, 190% 40%, 150% 50%);}
100%{clip-path: polygon(-100% 50%, -50% 50%, 50% 150%, 0% 150%);}
}
@keyframes clip3{
0%{clip-path: polygon(-100% -150%, -50% -150%, -150% -50%, -200% -50%);}
100%{clip-path: polygon(150% 50%, 200% 50%, 100% 150%, 50% 150%);}
}
@keyframes clip4{
0%{clip-path: polygon(150% -150%, 200% -150%, 300% -50%, 250% -50%);}
100%{clip-path: polygon(-100% 50%, -50% 50%, 50% 150%, 0% 150%);}
}
.clip{
filter:grayscale(1);
position: fixed;
width:100%;
height:100%;
background: url("https://i.pinimg.com/564x/78/1c/c4/781cc494ee02827dbd83851436adf982--cat-eyes-haircolor.jpg") no-repeat center;
transform-origin:center;
}
#clip1 { animation:clip1 4s linear infinite; }
#clipa {
transform: scale(1.1,1.1);
animation:clipa 9s linear infinite;
}
#clip2 {
transform: scale(1.12,1.12);
animation:clip2 5s linear infinite;
}
#clipb {
transform: scale(1.14,1.14);
animation:clipb 4s linear infinite;
}
#clip3 {
transform: scale(1.15,1.15);
animation:clip3 7s linear infinite;
}
#clip4 {
transform: scale(1.13,1.13);
animation:clip4 6s linear infinite;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment