CSS
body {
background: #000 url('http://i.imgur.com/A4UR1dg.jpg');
background-size: cover;
overflow: hidden;
}
figure {
width: 100%;
height: 200%;
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
perspective: 150px;
transform: translate(-50%, -50%) scaleX(2);
margin: 0;
}
article {
width: 100%;
height: 100%;
position: absolute;
text-align: center;
bottom: -200px;
animation: glide 2s infinite linear;
transform: rotateX(90deg) translate3d(0, 70px, 100px);
}
article div {
border: 1px solid #7FCAEB;
border-image: linear-gradient(to bottom, #24C8FF, white) 1 20%;
width: 70px;
height: 70px;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
box-shadow: 0px 0px 25px cyan;
mix-blend-mode: soft-light;
}
@keyframes glide {
100% {
transform: rotateX(90deg) translate3d(0, 0px, 100px);
}
}
