防止CSS從窄屏幕

我打算實施爲背景，以我的網頁下面星塵效果上走樣星塵效果：http://codepen.io/PiotrBerebecki/pen/aBbmgW 防止CSS從窄屏幕

是我遇到的問題是，當瀏覽器的寬度窗口低於700像素的星塵效果的光線會失真，如下圖所示：

你知道是什麼原因造成的扭曲的形狀，以及如何解決它？

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

來源

2016-11-04 Piotr Berebecki

爲什麼不只是使用SVG。這是一個非常多的HTML和CSS的背景？ –

解釋爲什麼你看到了你所看到的 - 這是由於你如何製作三角形。由於它只是一個傾斜的矩形的角落，其維度取決於視區尺寸，因此一旦視區高度與寬度的比率足夠高，傾斜矩形的角就會進入視野並消除這是三角形的效果。（你可以通過使用web檢查器來確認這一點，以在操縱視口時突出顯示元素。）就解決這個問題而言，雖然......哈哈，這讓我頭疼。去一個SVG。 = P – Serlite

@Serlite你是對的......但我認爲將li的寬度和高度增加到100％可以解決問題 – vals

由於您設定的相對大小爲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

你可能會想稍微改變漸變，因爲這已經使它從原始的一點點亮起來了。

來源

2016-11-04 15:00:31 Archer

個人而言，我會根據設備寬度...也許東西1920×1080，然後幾個創建幾個不同背景的更多用於較小的設備......

然後使用基於min的媒體查詢寬度（移動第一和所有:-)）或使用JavaScript ...

SVG也是一種選擇，也許如果你想要的東西動畫？

來源

2016-11-04 14:53:24 Sanspoof

防止CSS從窄屏幕

回答

相關問題