Animated gradient border HTML

...............

Kινούμενο περίγραμμα (animated gradient border), χωρίς εσωτερικές γραμμές ή άλλα στοιχεία, μπορείς να χρησιμοποιήσεις αυτό το HTML/CSS. Είναι έτοιμο για HTML Gadget στο Blogger:

αν θέλετε κάποιο άλλο χρώμα εσωτερικά το μόνο που πρέπει να κάνετε είναι να αλλάξετε τον κωδικό με κόκκινα (#fff) γράμματα

👇

<style>

.animated-border {

  width: 100%;

  height: 180px;

  border-radius: 20px;

  position: relative;

  overflow: hidden;

}

.animated-border::before {

  content: "";

  position: absolute;

  inset: -3px;

  background: linear-gradient(

    45deg,

    #ff0055,

    #ffcc00,

    #00ff99,

    #00ccff,

    #7a5cff,

    #ff0055

  );

  background-size: 400% 400%;

  animation: borderMove 6s linear infinite;

  z-index: 0;

}

.animated-border::after {

  content: "";

  position: absolute;

  inset: 4px;

  background: #fff;

  border-radius: 16px;

  z-index: 1;

}

@keyframes borderMove {

  0% {

    background-position: 0% 50%;

  }

  100% {

    background-position: 400% 50%;

  }

}

</style>

<div class="animated-border"></div>