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

Question

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

我遇到的问题是，当浏览器的宽度 window 低于 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);
}

Answer 1

就我个人而言，我会根据设备宽度创建几个不同的背景...可能是 1920x1080 的背景，然后是更小的设备的一些...

然后使用基于最小宽度的媒体查询（移动优先和所有:-)）或使用 javascript...

SVG 也是一个选项，也许如果你想要一些动画？

Answer 2

由于您将相对大小设置为 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

您可能需要稍微更改一下渐变，因为这会使它比原来的变亮一点。

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

Prevent CSS stardust effect from losing shape on narrow screen

html

css

position

responsive-design