CODEWITHSUNDEEP
htmlcssanimation
Bobbie
Bobbie

Reputation: 57

How to create a rainbow-colored circle using HTML and CSS?

I am trying to recreate this gif using HTML and CSS, but this is where I got stuck. Here is the gif: https://www.link-elearning.com/linkdl/coursefiles/1452/ADCSS9_assigment_animation1.gif

This is what I have done so far but I am stuck:

<!DOCTYPE html>
<html>

<head>
  <style>
    .circle {
      padding-top: 2px;
      height: 300px;
      width: 300px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
      background: rgb(32, 6, 146)
    }
    
    @keyframes scaleIn {
      from {
        transform: scale(.5, .5);
        opacity: .5;
      }
      to {
        transform: scale(2.5, 2.5);
        opacity: 0;
      }
    }
  </style>
</head>

<body style="background-color:#050210;">
  <div class="circle" style="animation-delay: -2s"></div>
  <div class="circle" style="animation-delay: -1s"></div>
  <div class="circle" style="animation-delay: -0"></div>
</body>

</html>

Upvotes: 1

Views: 1791

Answers (2)

Ashish Bhattarai
Ashish Bhattarai

Reputation: 150

I dont know where u study.. but it is one hell of a study.... Itadakimas... Thanks for the meal... I loved working on it

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.body {
  background-color: #050210;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.circle {
  position: absolute;
  height: 230px;
  width: 230px;
  border-radius: 50%;
  background: rgb(32, 6, 146)
}

.animate {
  transform: translate(-50%, -50%);
  animation: scaleIn 1.9s infinite;
}

.border {
  /* --b: 5px; */
  /* border width*/
  animation: rotate 3s infinite linear;
  z-index: 0;
  /* scale: 4.5; */
  --b: 10px;
  --c: linear-gradient(140deg, red, yellow, green);
  background: transparent;
  box-shadow: 5px 5px 19px #54aa00, -5px -5px 19px #ff5a00, -5px 5px 19px #f9e203, 5px -5px 19px #f9e203;
}

.border:after {
  content: "";
  display: inline-block;
  padding-top: 100%;
}

.border:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--c, linear-gradient(to right, #9c20aa, #fb3570));
  padding: var(--b);
  border-radius: 50%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

@keyframes scaleIn {
  from {
    transform: scale(.15, .15);
    opacity: .5;
  }
  to {
    transform: scale(1, 1);
    opacity: 0;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<div class="body">
  <div class="circle border"></div>
  <div class="circle animate" style="animation-delay: -0.95s"></div>
  <div class="circle animate" style="animation-delay: 0s"></div>
</div>

Whew,, Corrected all mistakes... didn't choose your color though

Upvotes: 0

MichaelTr7
MichaelTr7

Reputation: 4757

One method to get the rainbow coloured outlined is to use another div that sits behind the darker inner divs. This rainbow coloured outline can be achieved by using a linear-gradient. All the CSS animations are set to infinite to allow them to run repeatedly. Here I used some CSS variables to set the sizes of the circles indicated by -- in front of the variable name. It's good to note that it might be a good idea to put this in a wrapper/container div instead of the absolute positioning I have below. The pulsing in the centre could also use some adjustments. Press the Run code snippet button below to see the results:

body {
  background: rgba(6, 2, 20, 1);
}

#Blurry_Rainbow_Circle {
  position: absolute;
  --Circle_Diameter: 200px;
  top: calc(50% - var(--Circle_Diameter)/2);
  left: calc(50% - var(--Circle_Diameter)/2);
  height: var(--Circle_Diameter);
  width: var(--Circle_Diameter);
  border-radius: calc(var(--Circle_Diameter)/2);
  background: linear-gradient(139.84deg, #A692ED 14.35%, #6CECAD 45.6%, #D87EAA 82.79%);
  animation: Rotate 0.8s linear infinite;
  filter: blur(20px);
}

#Rainbow_Circle {
  position: absolute;
  --Circle_Diameter: 200px;
  top: calc(50% - var(--Circle_Diameter)/2);
  left: calc(50% - var(--Circle_Diameter)/2);
  height: var(--Circle_Diameter);
  width: var(--Circle_Diameter);
  border-radius: calc(var(--Circle_Diameter)/2);
  background: linear-gradient(139.84deg, #A692ED 14.35%, #6CECAD 45.6%, #D87EAA 82.79%);
  animation: Rotate 0.8s linear infinite;
}

#Large_Circle {
  position: absolute;
  --Circle_Diameter: 175px;
  top: calc(50% - var(--Circle_Diameter)/2);
  left: calc(50% - var(--Circle_Diameter)/2);
  height: var(--Circle_Diameter);
  width: var(--Circle_Diameter);
  border-radius: calc(var(--Circle_Diameter)/2);
  background: rgba(6, 2, 20, 1);
}

#Medium_Circle {
  position: absolute;
  --Circle_Diameter: 10px;
  top: calc(50% - var(--Circle_Diameter)/2);
  left: calc(50% - var(--Circle_Diameter)/2);
  height: var(--Circle_Diameter);
  width: var(--Circle_Diameter);
  border-radius: calc(var(--Circle_Diameter)/2);
  background: rgba(19, 12, 49, 1);
  animation: Grow 2s linear infinite;
}

#Small_Circle {
  position: absolute;
  --Circle_Diameter: 10px;
  top: calc(50% - var(--Circle_Diameter)/2);
  left: calc(50% - var(--Circle_Diameter)/2);
  height: var(--Circle_Diameter);
  width: var(--Circle_Diameter);
  border-radius: calc(var(--Circle_Diameter)/2);
  background: rgba(19, 12, 49, 1);
  animation: Grow_2 2s linear infinite;
}

@keyframes Rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes Grow {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(17);
    opacity: 0;
  }
  51% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes Grow_2 {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  40% {
    transform: scale(0);
    opacity: 0;
  }
  41% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(17);
    opacity: 0;
  }
}
<div id="Blurry_Rainbow_Circle"></div>
<div id="Rainbow_Circle"></div>
<div id="Large_Circle"></div>
<div id="Medium_Circle"></div>
<div id="Small_Circle"></div>

Upvotes: 3

Related Questions