CSS六边形，带有旋转边框颜色

Question

我想制作一个有旋转渐变边框的六边形。

示例GIF：

我尝试仅使用CSS制作形状，但这不起作用，因为：after和：before标签使用边框样式来创建形状，这是一个。

我尝试使用.svg文件并将其加载为背景图片，但无法更改边框并添加css动画以旋转边框

最后我试图插入GIF，但它有问题，如形状周围的白色光环。我的背景是黑暗的，所以非常明显。

那么用指定的动画插入这种形状的最佳方法是什么？

P.S。内联svg不是一个选项，因为我想简单地插入形状，如：

<div id='hex'></div>

感谢您的帮助。

Answer 1

动画GIF或SVG解决方案可能就是这种情况。

Buuuuuuuuut，为了实验，这里是一个CSS解决方案。

这是基本想法：

1. 创建一个六边形clip-mask的元素以创建六边形
2. 添加一个内部元素并应用一个圆锥形渐变 - 所有归功于此CSSTricks article如何做到这一点
3. 应用动画以使具有圆锥渐变的元素旋转
4. 覆盖另一个略小的六边形，以在中间创建空白

结束效果会产生看起来像旋转渐变的边框。

这有一些明显的缺点。例如，它不是透明的，因此需要设置内六角颜色以匹配元素背景，这仅适用于纯色背景。更大的问题是浏览器支持。所有浏览器都不支持clip-path属性。

.container {
  position: relative;
}

.clip {
  position: absolute;
  top: 0.50em;
  left: 0.50em;
  width: 8em;
  height: 8em;
  -webkit-clip-path: polygon(50% 0%, 94% 23%, 94% 75%, 50% 100%, 5% 75%, 5% 25%);
  clip-path: polygon(50% 0%, 94% 23%, 94% 75%, 50% 100%, 5% 75%, 5% 25%);
  background-color: #ffffff;
}

.wheel,
.umbrella,
.color {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 9em;
  height: 9em;
}

.wheel {
  -webkit-clip-path: polygon(50% 0%, 94% 23%, 94% 75%, 50% 100%, 5% 75%, 5% 25%);
  clip-path: polygon(50% 0%, 94% 23%, 94% 75%, 50% 100%, 5% 75%, 5% 25%);
  width: 9em;
  height: 9em;
  position: relative;
}

.umbrella {
  position: relative;
  -webkit-filter: blur(1.4em);
  -webkit-transform: scale(1.15);
  will-change: transform;
  animation: 3s linear rotate;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

.color,
.color:nth-child(n+7):after {
  clip: rect(0, 9em, 9em, 4.5em);
}

.color:after,
.color:nth-child(n+7) {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 4.5em);
  top: calc(50% - 4.5em);
  width: 9em;
  height: 9em;
  clip: rect(0, 4.5em, 9em, 0);
}

.color:nth-child(1):after {
  background-color: #9ED110;
  transform: rotate(30deg);
  z-index: 12;
}

.color:nth-child(2):after {
  background-color: #50B517;
  transform: rotate(60deg);
  z-index: 11;
}

.color:nth-child(3):after {
  background-color: #179067;
  transform: rotate(90deg);
  z-index: 10;
}

.color:nth-child(4):after {
  background-color: #476EAF;
  transform: rotate(120deg);
  z-index: 9;
}

.color:nth-child(5):after {
  background-color: #9f49ac;
  transform: rotate(150deg);
  z-index: 8;
}

.color:nth-child(6):after {
  background-color: #CC42A2;
  transform: rotate(180deg);
  z-index: 7;
}

.color:nth-child(7):after {
  background-color: #FF3BA7;
  transform: rotate(180deg);
}

.color:nth-child(8):after {
  background-color: #FF5800;
  transform: rotate(210deg);
}

.color:nth-child(9):after {
  background-color: #FF8100;
  transform: rotate(240deg);
}

.color:nth-child(10):after {
  background-color: #FEAC00;
  transform: rotate(270deg);
}

.color:nth-child(11):after {
  background-color: #FFCC00;
  transform: rotate(300deg);
}

.color:nth-child(12):after {
  background-color: #EDE604;
  transform: rotate(330deg);
}

<div class="container">
  <div class="wheel">
    <ul class="umbrella">
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
    </ul>
  </div>
  <div class="clip"></div>
</div>