带有渐变的纯 CSS 星爆轮

Question

我正在尝试在纯 CSS 中创建动画 "starburst wheel"。这是我目前所拥有的：

http://codepen.io/billdami/pen/qaGNRm

预期效果是一个三角形 spokes/rays 从中心向外扩展的圆圈，就像我在那里一样，但光线也是渐变的，其 alpha 透明度在最外边缘逐渐淡出至 0%（像 this) 之类的东西，那是我想不通的部分。

我使用边框宽度技巧来创建三角形，因为似乎没有任何其他真正的方法可以使用纯 css/html（可能是剪辑路径？）创建三角形，然后我打算使用 border-image 为其添加渐变，但这不起作用，因为您不能仅将边框图像应用于一侧。

有什么想法或建议吗？

编辑：clip-path 看起来已经过时了，因为它根本不支持 IE...

Answer 1

这是我的解决方案。

抱歉回答晚了！

body {
  padding: 50px;
}

.starbust-wheel {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
  animation: spin 8s infinite linear;
}
.starbust-wheel > li {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  padding: 0;
  margin: 0;
  transform-origin: 0 0;
}
.starbust-wheel > li:nth-child(odd) {
  background-image: linear-gradient(-197deg, red 5%, transparent 25%);
}
.starbust-wheel > li:nth-child(even) {
  background-image: linear-gradient(-197deg, blue 2%, transparent 30%);
}
.starbust-wheel > li:nth-child(1) {
    transform: rotate(18deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(2) {
    transform: rotate(36deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(3) {
    transform: rotate(54deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(4) {
    transform: rotate(72deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(5) {
    transform: rotate(90deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(6) {
    transform: rotate(108deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(7) {
    transform: rotate(126deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(8) {
    transform: rotate(144deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(9) {
    transform: rotate(162deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(10) {
    transform: rotate(180deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(11) {
    transform: rotate(198deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(12) {
    transform: rotate(216deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(13) {
    transform: rotate(234deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(14) {
    transform: rotate(252deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(15) {
    transform: rotate(270deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(16) {
    transform: rotate(288deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(17) {
    transform: rotate(306deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(18) {
    transform: rotate(324deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(19) {
    transform: rotate(342deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(20) {
    transform: rotate(360deg)  skewX(72deg);
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}

<ul class="starbust-wheel">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

我们开始了

带有渐变的纯 CSS 星爆轮

Pure CSS Starburst wheel with gradients

html

css

gradient