Prevent CSS Sternenstaub Wirkung von Form auf schmalem Bildschirm verliert

Ich plane, die folgende Wirkung Sternenstaub als Hintergrund auf meine Seite zu implementieren: http://codepen.io/PiotrBerebecki/pen/aBbmgW Prevent CSS Sternenstaub Wirkung von Form auf schmalem Bildschirm verliert

Das Problem, das ich erlebt habe, ist, dass, wenn die Breite des Browsers Fenster fallen unter 700px die Strahlen in dem Sternenstaub Effekt wie im folgende Bild verzerrt werden:

Möchten Sie wissen, was die Verzerrung in Form verursacht und wie man es beheben?

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

Quelle

2016-11-04 Piotr Berebecki

Warum nicht einfach ein SVG verwenden. Das ist eine Menge HTML & CSS für einen Hintergrund? –

Um zu erklären, warum Sie sehen, was Sie sehen - dies liegt daran, wie Sie diese Dreiecksform machen. Da es sich nur um eine Ecke eines schiefen Rechtecks handelt, dessen Abmessungen von den Abmessungen des Ansichtsfensters abhängen, wird die Ecke des verzerrten Rechtecks angezeigt, sobald das Verhältnis zwischen Höhe und Breite des Ansichtsfensters hoch genug ist. Dadurch wird der Effekt eines Dreiecks aufgehoben. (Sie können dies bestätigen, indem Sie einen Web-Inspektor verwenden, um das Element hervorzuheben, während Sie das Ansichtsfenster manipulieren.) In Bezug auf die Lösung dieses Problems ... haha, das macht meinen Kopf weh. Geh mit einem SVG. = P – Serlite

@Serlite Sie haben recht ... aber ich denke, dass die Erhöhung der Breite und Höhe des Li auf 100% das Problem lösen würde – vals

Sie schrumpfen nur aufgrund der relativen Größe, die Sie bei 50% festgelegt haben. Wenn Sie das auf 100% ändern, sieht es genauso aus, zeigt aber nicht das Problem, das Sie hatten. Ich würde empfehlen, auch die Höhe auf 100% zu ändern, so dass Sie nicht das Problem, wenn die Seitenhöhe zu niedrig geht ...

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

Aktualisiert Beispiel: http://codepen.io/anon/pen/MbWXga

Sie werden wahrscheinlich wollen um den Gradient leicht zu ändern, da dies etwas vom Original aufgehellt hat.

Quelle

2016-11-04 15:00:31 Archer

Persönlich würde ich ein paar verschiedenen Hintergründen erstellen basierend auf Gerätebreiten ... vielleicht etwas für 1920x1080, dann ein paar mehr für kleinere Geräte ...

Anschließend Medienabfragen basierend auf min -width (mobile zuerst und alle :-)) oder Javascript verwenden ...

SVG ist auch eine Option, vielleicht wenn Sie etwas animiertes möchten?

Quelle

2016-11-04 14:53:24 Sanspoof

Prevent CSS Sternenstaub Wirkung von Form auf schmalem Bildschirm verliert

Antwort

Verwandte Themen