<div class="plate1">
<div class="label">draxx them sklounst</div>
</div>
.plate1{
width: 80vh;
height: 80vh;
border-radius: 100%;
border: 2px solid black;
background: radial-gradient(circle, white 10%, black 10%, black calc(10% + 3px), transparent 5%),
repeating-radial-gradient(circle, black 5px, gray 7px, black 8px);
}
/* UNRELATED */
body{
margin: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 9vh 0;
}
.plate1{
animation: spin 9s linear infinite;
box-sizing: border-box;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.label{
color: black;
background-color: white;
display: inline-block;
margin-left: 25vh;
margin-top: 25vh;
font-size: 4vh;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.