Tworzenie Gwiaździstego tła w CSS

Tworzę stronę internetową układu słonecznego w czystym kodzie bez użycia obrazów. Problem polega na tym, że nie wiem, jak zdobyć gwiazdy w tle. Próbuję uzyskać coś w rodzaju żółtego rozłożonego wzoru kropki na czarnym tle. To jest mój kod (powtórz div i stylizację dla każdej innej planety).Tworzenie Gwiaździstego tła w 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>

Źródło

2015-11-26 marloso2

Hi spróbować zainspirować tutaj: http://codepen.io/search/pens/?limit=all&page= 9 & q = gwiazdki – Booster

Chciałbym zapytać o to, jak sprawić by orbity były eliptyczne ... – holden

Czy chcesz to zrobić w czystym CSS? Alternatywnym (innym niż javascript) może być użycie małego obrazu tła i powtórzenie go z 'background-repeat: repeat-x' i' background-repeat: repeat-y' – McVenco

Od this, ładny Gwiaździsta noc.

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;

Źródło

2015-11-26 23:19:23 marsei

I przeskalowałem gradienty z 30 i 40 na 5 i 10, ale to jest dokładnie to, czego szukałem. Dzięki – marloso2

znalazłem czystego roztworu CSS dzięki this code pen. To sprawi, że twoja strona będzie wyglądać jak this - niestety nie mogę skopiować i wkleić całego CSS, ponieważ jest zbyt długa (ponad 40 000 znaków, a StackOverflow pozwala mi tylko wkleić 30 000 dla fragmentu kodu). Oryginalny kod został wygenerowany za pomocą SASS i skompilowany, jest śmiesznie długi.

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

Kod SASS generowania te gwiazdy:

// 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

Źródło

2015-11-26 23:18:42 Singular1ty

Chciałem gwiazdy nieco mniejsze, więc edytować kod macduf trochę:

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;

Źródło

2015-11-27 00:25:32 marloso2

Tworzenie Gwiaździstego tła w CSS

Odpowiedz

Powiązane problemy