Как создать круг цвета радуги с помощью HTML и CSS?

ProgramBox

Как создать круг цвета радуги с помощью HTML и CSS?

Post author:admin
Запись опубликована:10 декабря, 2022
Post category:Вопросы по программированию

#html #css #animation

#HTML #css — код #Анимация

Вопрос:

Я пытаюсь воссоздать этот gif с помощью HTML и CSS, но здесь я застрял. Вот gif-файл: https://www.link-elearning.com/linkdl/coursefiles/1452/ADCSS9_assigment_animation1.gif

Это то, что я делал до сих пор, но я застрял:

 <!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>

Развернуть фрагмент

Ответ №1:

Один из способов получить контур радужного цвета — использовать другой div, который находится за более темными внутренними подразделениями. Этот радужный контур может быть достигнут с помощью линейного градиента. Все анимации CSS настроены на infinite то, чтобы они могли выполняться повторно. Здесь я использовал некоторые переменные CSS, чтобы задать размеры кругов, обозначенных -- символом перед именем переменной. Приятно отметить, что было бы неплохо поместить это в div-файл оболочки / контейнера вместо абсолютного позиционирования, которое я привел ниже. Пульсация в центре также нуждается в некоторой корректировке. Нажмите Run code snippetкнопку ниже, чтобы увидеть результаты:

 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>

Развернуть фрагмент

1. Эй, брат, посмотри на мой код ниже и скажи мне, почему границы моего круга размыты ..??

2. @AshishBhattarai Я пытался выяснить, что это может быть, но я не совсем уверен. Кажется, что свечение правильное, но -webkit-mask полностью обрезает цветную границу.

3. Да, кажется, вырезает пиксели… ((плач)) …. Мне тоже нравится ваш… Слои за слоями.. Почему я об этом не подумал… Но если требуется прозрачность (большой круг), как бы вы поступили… Пожалуйста, ответьте..

4. Обнаружена проблема…. Масштабирование любых вещей — плохая идея…. Хотя масштабирование в порядке

5. Другой способ — поместить a <div> внутри друг друга и использовать mix-blend-mode: hard-light; .

Ответ №2:

Я не знаю, где ты учишься.. но это чертовски трудоемкое исследование…. Итадакимас… Спасибо за угощение… Мне нравилось работать над этим

 * {
  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>

Развернуть фрагмент

Фух ,, Исправил все ошибки … не выбрал свой цвет, хотя