Question

我试图在纯CSS中创建一个动画“星爆轮”。这是我到目前为止所做的：

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

预期的效果是一个圆形，三角形辐条/光线从中心向外扩展，就像我在那里一样，但也有光线是渐变，其最大边缘的α透明度渐弱到0％（类似{{ 3}}），这是我无法弄清楚的部分。

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

有任何想法或建议吗？

编辑：剪辑路径看起来像它一样，因为它根本没有IE支持...

Answer 1

这是我的解决方案。

对不起，迟到了！

＆＃13;

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);
  }
}

＆＃13;

<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>

＆＃13;

我们走了

带有渐变的纯CSS Starburst轮

1 个答案: