CSS
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
background: #222;
display: flex;
justify-content: center;
align-items: center;
}
.logo {
position: relative;
width: 300px;
height: 300px;
animation: animate 3s infinite linear;
}
.logo img {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
transform: translate(-50%, -50%);
}
.logo:before,
.logo:after {
position: absolute;
content: '';
width: 200px;
height: 200px;
top: 50px;
border-radius: 5px;
transform: rotate(45deg);
background: rgba(0,155,255,0.05);
z-index: 0;
box-shadow: 0 0 0 1px #fff,
0 0 10px 1px #3498db,
inset 0 0 10px 1px #3498db;
}
.logo:before {
left: 35px;
}
.logo:after {
right: 35px;
}
@keyframes animate {
0% { width: 300px; }
50% { width: 240px; }
}
