It works great on codepen
Code: Select all
<div class="nsr-border-anim"></div>
Code: Select all
@property --angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
body {
background: #000;
display: grid;
place-items: center;
min-height: 100vh;
}
.moving-border {
width: 200px;
height: 300px;
position: relative;
background: #111;
padding: 4px;
}
.moving-border::before,
.moving-border::after {
content: "";
position: absolute;
inset: -0.2rem;
z-index: -1;
background: linear-gradient(var(--angle),
#032146, #C3F2FF, #b00);
animation: rotate 10s linear infinite;
}
.moving-border::after {
filter: blur(10px);
}
@keyframes rotate {
0% { --angle: 0deg; }
100% { --angle: 360deg;
}
}
This technology does not work in Joomla 4, not all browsers support it.
Is it possible to translate this experimental technology into standard css?