.box
View Compiled
$color-background: #fff;
$color-outline: #363636;
$color-fill: #888;
html {
font-size: 48px;
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: $color-background;
}
.box {
position: relative;
background: $color-fill;
border: 0.25rem solid $color-outline;
box-sizing: border-box;
height: 4rem;
width: 4rem;
outline: 0;
overflow: hidden;
&::before {
content: "CSS";
font-family: Arial;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
// &::before {
// content: "";
// position: absolute;
// bottom: -50%;
// left: -50%;
// height: 200%;
// width: 200%;
// box-sizing: border-box;
// background-color: $color-background;
// border-radius: 40%;
// opacity: 0.5;
// animation: spin 6s linear infinite reverse;
// }
&::after {
content: "";
position: absolute;
bottom: -50%;
left: -50%;
height: 200%;
width: 200%;
box-sizing: border-box;
background-color: $color-background;
border-radius: 40%;
animation: spin 6s linear infinite;
}
}
@keyframes spin {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(-100%) rotate(360deg);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.