SCSS
*,
*:before,
*:after {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/FrancesGunn.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
body:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40vw;
height: 40vh;
border-top: 20vh solid;
border-right: 20vw solid;
border-bottom: 20vh solid;
border-left: 20vw solid;
border-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/FrancesGunn.jpg");
border-image-slice: 25%;
transform: translateX(-50%) translateY(-50%);
animation: animateBorder 3s infinite alternate-reverse;
animation-delay: -1s;
}
@keyframes animateBorder {
0% { border-image-slice: 8%; }
100% { border-image-slice: 35%; }
}
