You've already forked ProfessionalWebsite
Alexander Davis
017cfc077a
Added Minecraft Education Ambassador accreditation Signed-off-by: Alexander Davis <alex@adcm.uk>
62 lines
1.7 KiB
SCSS
62 lines
1.7 KiB
SCSS
.rainbow-border:hover {
|
|
--border-angle: 0turn; // For animation.
|
|
--main-bg: conic-gradient(
|
|
from var(--border-angle),
|
|
var(--bs-primary),
|
|
#112 5%,
|
|
#112 60%,
|
|
#213 95%
|
|
);
|
|
|
|
border: solid 5px transparent;
|
|
border-radius: 5px;
|
|
--gradient-border: conic-gradient(from var(--border-angle), transparent 25%, var(--bs-primary), var(--bs-secondary) 99%, transparent);
|
|
|
|
background:
|
|
// padding-box clip this background in to the overall element except the border.
|
|
var(--main-bg) padding-box,
|
|
// border-box extends this background to the border space
|
|
var(--gradient-border) border-box,
|
|
// Duplicate main background to fill in behind the gradient border. You can remove this if you want the border to extend "outside" the box background.
|
|
var(--main-bg) border-box;
|
|
|
|
background-position: center center;
|
|
|
|
animation: bg-spin 3s linear infinite;
|
|
@keyframes bg-spin {
|
|
to {
|
|
--border-angle: 1turn;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
@property --border-angle {
|
|
syntax: "<angle>";
|
|
inherits: true;
|
|
initial-value: 0turn;
|
|
}
|
|
|
|
|
|
@keyframes colour-change {
|
|
0% {
|
|
background: linear-gradient(120deg, var(--bs-primary), var(--bs-secondary));
|
|
}
|
|
50% {
|
|
background: linear-gradient(120deg, var(--bs-secondary), var(--bs-primary), var(--bs-secondary));
|
|
}
|
|
100% {
|
|
background: linear-gradient(120deg, var(--bs-secondary), var(--bs-primary));
|
|
}
|
|
}
|
|
@keyframes reverse-colour-change {
|
|
0% {
|
|
background: linear-gradient(120deg, var(--bs-secondary), var(--bs-primary));
|
|
}
|
|
50% {
|
|
background: linear-gradient(120deg, var(--bs-primary), var(--bs-secondary), var(--bs-primary));
|
|
}
|
|
100% {
|
|
background: linear-gradient(120deg, var(--bs-primary), var(--bs-secondary));
|
|
}
|
|
} |