Ønsker du et badge som er lidt være opmærksomheds krævende? Så kan dette kode hjælpe dig.
Se effekten her på codepen.
OBS. Koden herunder kan som udgangspunkt kun bruges på vores widget “Auxo Sale Badge“, og classen: “shimmer-badge” skal tilføjes på dette widget.
Ønsker du at bruge den på andre elementer kan dette også lade sig gøre, du skal blot skifte selectoren i CSS koden.
/* Shimmer badge */
.shimmer-badge .aveo-widget-content {
width: fit-content;
background-image: linear-gradient(-60deg, #ffffff00 0%, #ffffff00 40%, #ffffff44 40%, #ffffff44 60%, #ffffff00 60%, #ffffff00 100%);
background-size: 200% 100%;
background-repeat: no-repeat;
animation-name: shimmer;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes shimmer {
0% {
background-position-x: 135%;
}
40%,
100% {
background-position-x: -135%;
}
}