2020年新年大赛！

Question

Alexandr_TT

Asked:2020-12-21 19:14:31 +0000 UTC2020-12-21 19:14:31 +0000 UTC 2020-12-21 19:14:31 +0000 UTC

带有彩色旋转边框的 CSS 六边形

772

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

GIF 示例：

我尝试只使用 CSS 创建形状，但它不起作用，因为:afterand标记:before使用边框样式来创建形状，但它不存在。

我尝试使用该文件*.svg并将其加载为background-image，但无法更改边框并添加 CSS 动画来旋转边框。

最后我尝试粘贴*.gif，但它有像形状周围的白色光环这样的问题。我的背景很暗，所以很明显。

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

P.S. 嵌入式 SVG 不是一个选项，因为我只想插入这样的形状：

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

2 个回答

Voted

Qwertiy · Answer 1 · 2020-12-21T23:58:32Z

圆圈可以这样完成：

html, body {
  background: black;
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

div {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, black, black 66%, transparent calc(66% + 1px)),
    radial-gradient(circle at 50%  3%, blue,  transparent 25%),
    radial-gradient(circle at  3% 50%, green, transparent 25%),
    radial-gradient(circle at 97% 50%, green, transparent 25%),
    radial-gradient(circle at 50% 97%, red,   transparent 25%);
  animation: spin 5s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0)     }
  to   { transform: rotate(1turn) }
}

<div></div>

现在，同样地，一个六边形：

html, body {
  background: black;
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

div {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  clip-path: polygon(50% -1%, 93% 22%, 93% 78%, 50% 101%, 7% 78%, 7% 22%);
  position: relative;
  overflow: hidden;
}

div::before, div::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

div::before {
  background:
    radial-gradient(circle at 50%  3%, blue,  transparent 25%),
    radial-gradient(circle at  3% 50%, green, transparent 25%),
    radial-gradient(circle at 97% 50%, green, transparent 25%),
    radial-gradient(circle at 50% 97%, red,   transparent 25%);
  animation: spin 5s linear infinite;
}

div::after {
  margin: .25em;
  background: black;
  clip-path: inherit;
  border-radius: inherit;
}

@keyframes spin {
  from { transform: rotate(0)     }
  to   { transform: rotate(1turn) }
}

<div></div>

如果要消除间隙，可以简单地增加渐变的大小：

html, body {
  background: black;
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

div {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  clip-path: polygon(50% -1%, 93% 22%, 93% 78%, 50% 101%, 7% 78%, 7% 22%);
  position: relative;
  overflow: hidden;
}

div::before, div::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

div::before {
  background:
    radial-gradient(circle at 50%  3%, blue,  transparent 60%),
    radial-gradient(circle at  3% 50%, green, transparent 60%),
    radial-gradient(circle at 97% 50%, green, transparent 60%),
    radial-gradient(circle at 50% 97%, red,   transparent 60%);
  animation: spin 5s linear infinite;
}

div::after {
  margin: .25em;
  background: black;
  clip-path: inherit;
  border-radius: inherit;
}

@keyframes spin {
  from { transform: rotate(0)     }
  to   { transform: rotate(1turn) }
}

<div></div>

您还可以增加颜色的数量：

html, body {
  background: black;
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

div {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  clip-path: polygon(50% -1%, 93% 22%, 93% 78%, 50% 101%, 7% 78%, 7% 22%);
  position: relative;
  overflow: hidden;
}

div::before, div::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

div::before {
  background:
    radial-gradient(circle at 50%  3%, #0000FF, transparent 25%),
    radial-gradient(circle at  3% 50%, #00FF00, transparent 25%),
    radial-gradient(circle at 97% 50%, #FF00FF, transparent 25%),
    radial-gradient(circle at 50% 97%, #FF0000, transparent 25%),
    radial-gradient(circle at 75% 75%, #FFFF00, transparent 25%),
    radial-gradient(circle at 75% 25%, #32AA15, transparent 25%),
    radial-gradient(circle at 25% 25%, #F48024, transparent 25%),
    radial-gradient(circle at 25% 75%, #FFFFFF, transparent 25%);
  animation: spin 5s linear infinite;
}

div::after {
  margin: .25em;
  background: black;
  clip-path: inherit;
  border-radius: inherit;
}

@keyframes spin {
  from { transform: rotate(0)     }
  to   { transform: rotate(1turn) }
}

<div></div>

Alexandr_TT · Answer 2 · 2020-12-21T19:14:31Z

@Brett DeWoody对 EnSO 问题的回答的翻译：带有旋转边框颜色的 CSS Hexagon

在这种情况下，最好使用动画 GIF 或 SVG 解决方案。

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

大意：

用 hex 创建一个元素clip-mask得到一个六边形
添加内部元素并应用锥形渐变- 请参阅这篇CSSTricks 文章了解如何执行此操作。浏览器支持
应用动画以使具有锥形渐变的元素旋转
覆盖另一个稍小的六边形，在中间创建一个自由空间

最终效果看起来像渐变边框正在旋转。

这有一些明显的缺点。
首先，它不是透明的，所以你需要设置内六边形的颜色来匹配元素的背景，这仅适用于纯背景颜色。

最大的问题是浏览器支持。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>

带有彩色旋转边框的 CSS 六边形

根据浏览器窗口的大小调整背景图案的大小

理解for循环的执行逻辑

复制动态数组时出错（C++）

Or and If,elif,else 构造[重复]

如何构建支持 x64 的 APK

如何使按钮的输入宽度？

如何显示对象变量的名称？

如何循环一个函数？

LOWORD 宏有什么作用？

从字符串的开头删除直到并包括一个字符

带有彩色旋转边框的 CSS 六边形

2 个回答

相关问题