html - 防止CSS星尘效果在窄屏上变形

我打算实现以下星尘效果作为页面背景：http://codepen.io/PiotrBerebecki/pen/aBbmgW

我遇到的问题是，当浏览器窗口的宽度降到700px以下时，星尘效果中的光线会失真，如下图所示：



您知道什么原因导致形状变形以及如何解决吗？

HTML：

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

body {
  padding: 0;
  margin: 0;
  background: #03a9f4;
}

.starbust-wheel {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.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, rgba(255, 255, 255, 0.4) 5%, transparent 25%);
}

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

最佳答案

由于您将相对尺寸设置为50％，它们只是在缩小。如果将其更改为100％，则它看起来完全相同，但不会出现您遇到的问题。我还建议将高度更改为100％，这样，如果页面高度过低，就不会出现问题...

.starbust-wheel > li {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  transform-origin: 0 0;
}

更新的示例：
http://codepen.io/anon/pen/MbWXga

您可能需要稍微更改渐变，因为这使它比原始渐变更亮了。

关于html - 防止CSS星尘效果在窄屏上变形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40425405/