Creazione di uno sfondo stellato nei CSS

Sto creando un sito Web di sistema solare in puro codice senza immagini utilizzate. Il problema è che non riesco a capire come ottenere stelle sullo sfondo. Sto cercando di ottenere qualcosa come un motivo a pois giallo su sfondo nero. Questo è il mio codice (ripetere div e styling per ogni altro pianeta).Creazione di uno sfondo stellato nei CSS

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: black; 
 
} 
 
#sun { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin-top: -100px; 
 
    margin-left: -100px; 
 
    border-color: orange; 
 
    border-width: 2px; 
 
    border-style: solid; 
 
    border-radius: 50%; 
 
    box-shadow: 0 0 64px yellow; 
 
    background-color: yellow; 
 
} 
 
#mercury { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    height: 10px; 
 
    width: 10px; 
 
    margin-left: -5px; 
 
    margin-top: -5px; 
 
    border-radius: 50%; 
 
    background-color: #ffd9b3; 
 
} 
 
#mercury-orbit { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 260px; 
 
    height: 260px; 
 
    margin-top: -130px; 
 
    margin-left: -130px; 
 
    border-width: 2px; 
 
    border-style: dotted; 
 
    border-color: white; 
 
    border-radius: 50%; 
 
    -webkit-animation: spin-right 22s linear infinite; 
 
    -moz-animation: spin-right 22s linear infinite; 
 
    -ms-animation: spin-right 22s linear infinite; 
 
    -o-animation: spin-right 22s linear infinite; 
 
    animation: spin-right 22s linear infinite; 
 
} 
 
@-webkit-keyframes spin-right { 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    -moz-transform: rotate(360deg); 
 
    -ms-transform: rotate(360deg); 
 
    -o-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@keyframes spin-right { 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    -moz-transform: rotate(360deg); 
 
    -ms-transform: rotate(360deg); 
 
    -o-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div id="sun"></div> 
 
<div id="mercury-orbit"> 
 
    <div id="mercury"></div> 
 
</div>

fonte

2015-11-26 marloso2

Hi try ispirano qui: http://codepen.io/search/pens/?limit=all&page= 9 & q = stars – Booster

mi piacerebbe sapere come rendere le tue orbite ellittiche .... – holden

Vuoi farlo in puro CSS? Un'alternativa (diversa da javascript) potrebbe essere quella di usare una piccola immagine di sfondo e ripeterla con 'background-repeat: repeat-x' e' background-repeat: repeat-y' – McVenco

Da this, una bella notte stellata.

background-color:black; 
background-image: 
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), 
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px), 
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px), 
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px); 
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;

fonte

2015-11-26 23:19:23 marsei

Ho ridimensionato i gradienti da 30 e da 40 a 5 e 10, ma questo è esattamente quello che stavo cercando. Grazie – marloso2

ho trovato una soluzione CSS puro grazie alla this code pen. Ciò renderebbe il tuo sito web come this - sfortunatamente non riesco a copiare e incollare l'intero CSS, poiché è troppo lungo (oltre 40.000 caratteri e StackOverflow mi consente di incollare solo 30.000 per uno snippet di codice). Il codice originale è stato generato con SASS, e compilato, è ridicolmente lungo.

<div id='stars'></div> 
<div id='stars2'></div> 
<div id="sun"></div> 
<div id="mercury-orbit"> 
    <div id="mercury"></div> 
</div>

Il codice SASS generare queste stelle:

// n is number of stars required 
@function multiple-box-shadow ($n) 
    $value: '#{random(2000)}px #{random(2000)}px #FFF' 
    @for $i from 2 through $n 
    $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF' 

    @return unquote($value) 

$shadows-small: multiple-box-shadow(700) 
$shadows-medium: multiple-box-shadow(200) 
$shadows-big: multiple-box-shadow(100) 

#stars 
    width: 1px 
    height: 1px 
    background: transparent 
    box-shadow: $shadows-small

fonte

2015-11-26 23:18:42 Singular1ty

Volevo le stelle un po 'più piccole in modo ho modificato il codice di macduf un po':

background-color:black; 
background-image: 
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 10px), 
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 5px), 
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 10px), 
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 5px), 
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 10px), 
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 5px); 
background-size: 750px 750px, 550px 550px, 450px 450px, 350px 350px, 250px 250px, 150px 150px; 
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px, 110px 200px;

fonte

2015-11-27 00:25:32 marloso2

Creazione di uno sfondo stellato nei CSS

risposta

Problemi correlati