CSSのランダムdivの配置と応答性

Question

星空の夜のアニメーションを作成しましたが、CSSだけでdivを「ランダムに」配置する方が良いかどうか疑問に思っていましたか？また、私は応答性にも問題があります。あなたの時間をありがとう！ただ勉強しようとしています。

チェック現時点でピュアCSSでそれは不可能ですhttp://codepen.io/anon/pen/MeeYWO?editors=1100

#star-bl:nth-of-type(5) { 
    left: -350px; 
    top: 225px; 
} 

#star-bl:nth-of-type(6) { 
    left: 750px; 
    top: 250px; 
} 

#star-bl:nth-of-type(7) { 
    left: -450px; 
} 

#star-sm:nth-of-type(8) { 
    left: -225px; 
} 

#star-sm:nth-of-type(9) { 
    left: 500px; 
} 

#star-sm:nth-of-type(10) { 
    left: -100px; 
} 

Answer 1

の完全なコードは、（私がCALC（RANDのために望んでいる）ことになるため）。あなたが使用しているソリューションはどれも優れていますが、小さいスクリーンタイプで星をクラスタ化する場合は、パーセンテージの使用を検討することをお勧めします。

Answer 2

残念ながら、現時点ではCSSでは不可能です。

ただし、CSSからLESSに変更する場合は、あなたの星にランダムな値を与えることができます。 this postのように、バックスラックでJavaScript式を折り返すことで、JavaScriptをLESSに挿入することができます。

ここでは1から100

#star-bl { 
    @random-margin: `Math.random() * 100`; 
    left: @random-margin * 1px; 
} 

にあなたのdiv＃スター-BLランダム左の値を与えるためにあなたはまだ、すべての星にLESSファイル内の別のブロックを与える必要があるだろうが、それは希望例ですあなたがページを訪問するたびにあなたの星の位置を変えてください。バニラのCSSと

Here's a link to a guide for using LESS.

Answer 3

ないが、あなたは、コンパイル時にあなたのための乱数を生成するために、このようなLessやSassとしてCSSプリプロセッサを使用することができます。

ここでは、random instance methodを使ってSassでそれを行う方法を説明します。

@import compass 
body 
    background: black 

.star 
    width: 10px 
    height: 10px 
    position: absolute 
    font-size: 10px 
    color: white 

@for $i from 1 through 500 
    .star:nth-child(#{$i}) 
    top: random(1000) + px 
    left: random(1000) + px 

DEMO：http://codepen.io/moob/pen/dXXGdy