<div class="splash-layer"></div>
<div class="splash-layer"></div>
<div class="splash-layer"></div>
<div class="splash-layer"></div>
<div class="splash-layer"></div>
<div class="splash-layer"></div>
<div class="splash-layer"></div>
body {overflow:hidden;}
.splash-layer {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
transition: transform 0.8s ease-in-out;
box-shadow: 0px 0px 25px rgba(0,0,0,.7);
background-position: center center;
background-repeat: no-repeat;
}
.splash-layer:nth-child(1) {
z-index: 7;
background-image: url(https://s.cdpn.io/2585/splashscreen.png);
background-color: #000;
transform-origin: bottom left;
transform: rotate(-70deg) translateY(-100%);
transition-delay:1s;
}
.splash-layer:nth-child(2) {
z-index: 6;
background-image: url(https://s.cdpn.io/2585/logo_2.png);
background-color: #4FC2EB;
transform-origin: bottom right;
transform: rotate(70deg) translateX(100%) translateY(-100%);
transition-delay:1.5s;
}
.splash-layer:nth-child(3) {
z-index: 5;
background-image: url(https://s.cdpn.io/2585/logo_2.png);
background-color: #EC5B07;
transform-origin: bottom left;
transform: rotate(-60deg) translateY(-110%);
transition-delay:2s;
}
.splash-layer:nth-child(4) {
z-index: 4;
background-image: url(https://s.cdpn.io/2585/logo_3.png);
background-color: #ECE23B;
transform-origin: bottom right;
transform: rotate(70deg) translateX(100%) translateY(-100%);
transition-delay:2.5s;
}
.splash-layer:nth-child(5) {
z-index: 3;
background-image: url(https://s.cdpn.io/2585/logo_4.png);
background-color: #AA53EC;
transform-origin: bottom left;
transform: rotate(-60deg) translateY(-110%);
transition-delay:3s;
}
.splash-layer:nth-child(6) {
z-index: 2;
background-image: url(https://s.cdpn.io/2585/logo_5.png);
background-color: #77B727;
transform-origin: bottom right;
transform: rotate(70deg) translateX(100%) translateY(-100%);
transition-delay:3.5s;
}
.splash-layer:nth-child(7) {
z-index: 1;
background-color: #EB2F3C;
animation:blast_out 1.5s cubic-bezier(0,.60,0,1) 4.5s;
background-image: url(https://s.cdpn.io/2585/logo_6.png);
}
@keyframes blast_out {
from {}
to {
transform: scale3d(4,4,4) translateX(0) translateY(0);
opacity:0;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.