时间戳

首页 > 解决方案 > 如何使 blob 具有变化的颜色以及如何使较小的轨道圆圈变成图标？

html - 如何使 blob 具有变化的颜色以及如何使较小的轨道圆圈变成图标？

问题描述

我需要一些帮助来更改此 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. 我希望轨道斑点成为图标

标签： htmlcss

解决方案

  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;}
}
  1. 我希望轨道斑点成为图标

我不是 100% 设想你在这里想要什么，但我猜你希望它们是图像而不是普通div的 s？您应该能够将divs替换为imgs 并指定一个srcURL。图像可能会因您设置高度的方式而略微拉伸，因此您实际上可能希望将它们放在 div 中，而不是使用overflow:hidden某种居中的 CSS。

推荐阅读