<div class="nintendo-switch">
<h1>NINTENDO<strong>SWITCH</strong></h1>
</div>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #e60012;
}
.nintendo-switch {
position: relative;
top: -3.5em;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 260px;
padding-top: 200px;
}
.nintendo-switch::before,
.nintendo-switch::after {
position: absolute;
content: "";
display: block;
height: 200px;
}
.nintendo-switch::before {
top: 0;
right: 50%;
width: 97px;
border-radius: 50px 0 0 50px;
box-shadow: 0 0 0 16px #fff inset;
background: radial-gradient(#fff 70%, transparent 70%) center 41px / 38px 38px no-repeat;
margin-right: 10px;
animation: left .4s 1s ease-in-out 1 both;
}
.nintendo-switch::after {
top: -50%;
left: 50%;
width: 84px;
border-radius: 0 50px 50px 0;
background: radial-gradient(#e60012 70%, transparent 70%) center 90px / 38px 38px no-repeat, #fff;
margin-left: 10px;
animation: right .4s 1s ease-in-out 1 both;
}
@keyframes left {
0 { top: 0; }
80% { top: 10%; }
100% { top: 0; }
}
@keyframes right {
0 { top: -50%; }
80% { top: 10%; }
100% { top: 0; }
}
h1 {
position: absolute;
bottom: -3.5em;
font: 600 30px / 1 'Montserrat', sans-serif;
letter-spacing: .4em;
color: #fff;
margin: 0;
}
h1 strong {
display: block;
font-size: 1.8em;
letter-spacing: .1em;
}
h1::after {
position: absolute;
right: -.3em;
bottom: .6em;
content: "TM";
font-size: 10px;
font-weight: 400;
letter-spacing: 0;
}
This Pen doesn't use any external JavaScript resources.