Help with a code to make an animated border

Webdesign Help
1

I would like the help of friends to be able to make this type of effect in BSS, the effect was made in WP with the Elementor plugin.

Video link: https://youtu.be/Hd7F3ScjvYw

So far I only got this result. https://apresentacao.bss.design/

Here the css code:

:root{
    --first-color: #ef32d9;
    --second-color: #89fffd;
    --size: 100px;
    --speed: 4s;
}
selector{
    overflow: hidden !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
selector:before{
    content: '';
    position: absolute;
    width: var(--size);
    height: 140%;
    background: linear-gradient(var(--first-color), var(--second-color));
    animation: animate var(--speed) linear infinite;
}
@keyframes animate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
2

HTML
<div class="rotating-gradient">blah blah blah</div>

CSS:

:root {
  --first-color: #ef32d9;
  --second-color: #89fffd;
  --size: 100px;
  --speed: 4s;
}

.rotating-gradient {
  --angle: 0deg;
  width: --size: 100px;
  height: height: 140%;
  border: 15px solid;
  border-image: conic-gradient(from var(--angle), var(--first-color), var(--second-color)) 1;
  animation: var(--speed) rotategrad linear infinite;
}

@keyframes rotategrad {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

Ideally you will need the div to be square to give a smooth transition.

3
1 Like
4

Thanks @richards @kuligaposten , it worked great, I’ll try to use the code in my project.

5

Damn, CSS is getting powerful!

6

I would say the feasibility of almost all CSS discussed in this thread is roughly possible for 3 years. But yes in general CSS continues to thrive with impressive advancements, with many big game changers coming ahead. :+1:

7

They seem to be making it more of a programming language, than just a styling language. It’s hard to keep up. There are already many CSS features that I haven’t learned. I remember feeling overwhelmed at having to learn pseudo classes!

8

Yes, said everyone regarding the web. :wink: