<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(0);
position: fixed;
width:100%;
height:100%;
background: url("https://static.tildacdn.com/tild6635-3762-4338-b830-333064646439/giphy.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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.