带有旋转边框颜色的 CSS Hexagon

Question

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

GIF 示例：

我尝试仅使用 CSS 制作形状，但没有成功，因为 :after 和 :before 标签使用边框样式来创建形状，这是不行的。

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

最后我尝试插入 GIF，但它有问题，例如形状周围的白色光晕。我的背景很暗，所以很明显。

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

附：内联 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>