HTML
<div class="box"></div>
CSS
:root {
--bg-grey: #eee;
--bg-dark: #303032;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
body {
display: grid;
place-content: center;
background-color: #fff;
}
.box {
width: 10rem;
height: 10rem;
border: 2px solid var(--bg-dark);
background-color: var(--bg-dark);
position: relative;
overflow: hidden;
}
.box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width:100%;
height: 100%;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/53/Google_\"G\"_Logo.svg");
background-size: cover;
background-position: 100%;
}
.box::after {
content: '';
position: absolute;
bottom: -50%;
left: -50%;
border-radius: 45%;
width: 180%;
height: 180%;
background-color: var(--bg-grey);
animation: spin 4s ease-in-out infinite;
}
@keyframes spin {
from {
transform: translateY(0) rotate(0);
}
to {
transform: translateY(-100%) rotate(500deg);
}
}
Result
Top comments (0)