48 lines
1.1 KiB
SCSS
48 lines
1.1 KiB
SCSS
/*.box {
|
|
--border-width: 3px;
|
|
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 300px;
|
|
height: 200px;
|
|
font-family: Lato, sans-serif;
|
|
font-size: 2.5rem;
|
|
text-transform: uppercase;
|
|
color: white;
|
|
background: #222;
|
|
border-radius: var(--border-width);
|
|
|
|
&::after {
|
|
position: absolute;
|
|
content: "";
|
|
top: calc(-1 * var(--border-width));
|
|
left: calc(-1 * var(--border-width));
|
|
z-index: -1;
|
|
width: calc(100% + var(--border-width) * 2);
|
|
height: calc(100% + var(--border-width) * 2);
|
|
background: linear-gradient(
|
|
60deg,
|
|
hsl(0, 0%, 0%),
|
|
hsl(0, 2%, 38%),
|
|
hsl(0, 28%, 60%),
|
|
hsl(0, 6%, 85%),
|
|
hsl(0, 91%, 40%),
|
|
hsl(0, 0%, 79%),
|
|
hsl(0, 10%, 80%),
|
|
hsl(0, 0%, 0%)
|
|
);
|
|
background-size: 300% 300%;
|
|
background-position: 0 50%;
|
|
border-radius: calc(2 * var(--border-width));
|
|
animation: moveGradient 4s alternate infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes moveGradient {
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
}
|
|
*/ |