Как сделать так, чтобы капля меняла цвет, и как сделать маленькие круги на орбите иконками?

Question

Мне нужна помощь в внесении изменений в этот BLOB-объект. https://codepen.io/mcasey/pen/LVoZvg

<div class="blobs">  
      <div class="blob"></div>
      <div class="blob"></div>
      <div class="blob"></div>
      <div class="blob"></div>
      <div class="blob"></div>
      <div class="blob"></div>
  </div>

  <div class="blips">
    <div class="blip"></div>
    <div class="blip"></div>
    <div class="blip"></div>
    <div class="blip"></div>
  </div>

Я ищу:

1. Сделать цвет переменной BLOB и изменить
2. Я хочу орбитальные капли будут иконками

Answer 1

1. Сделать цвет переменной BLOB и изменить его

На самом деле, CSS может анимировать цвет так же, как любой другой параметр. Это довольно хорошо и легко в использовании.

@keyframes mydownleft {
    0%   {left: 0px;top:0px;    transform: rotate(0deg);    background-color: red;}
    50%  {left: 10px; top:10px; transform: rotate(-180deg); background-color: yellow;}
    100% {left: 0px; top:0px;   transform: rotate(-360deg); background-color: red;}
}

Я хочу, чтобы орбитальные капли были иконками

Я не на 100% представляю, что вы хотите здесь, но я предполагаю, что вы хотите, чтобы они были изображениями вместо простых div s? Вы должны просто заменить div s на img s и просто указать src URL. Изображения могут слегка растягиваться с вашим способом установки высоты, так что вы, возможно, захотите поместить их в div вместо overflow:hidden и некоторого центрирования CSS, возможно.