6
Ho cercato in giro e provare per un paio di giorni, ma ho appena cant sembrano per ottenere il 100% giusto ... io sto cercando di realizzare il seguente effetto con gradiente css3:effetto Sunburst con gradiente CSS3
la più vicina che ho ottenuto è DEMO:
html {
background:
linear-gradient(80deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(90deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(82deg, transparent 50%, #eee 50%, #eee),
linear-gradient(67deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(52deg, transparent 50%, #eee 50%, #eee),
linear-gradient(37deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(22deg, transparent 50%, #eee 50%, #eee),
linear-gradient(7deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(-8deg, transparent 50%, #eee 50%, #eee),
linear-gradient(-23deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(-38deg, transparent 50%, #eee 50%, #eee),
linear-gradient(-53deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(-68deg, transparent 50%, #eee 50%, #eee),
linear-gradient(-83deg, transparent 50%, #ddd 50%, #ddd);
background-position: center -100%;
background-color: #eee;
background-size: 100% 200%;
min-height: 100%;
}Continuerò a provarlo .. ogni aiuto è comunque molto apprezzato.
Aggiornamento:
Ci deve essere un modo migliore/riutilizzabile di fare questo ... guardare in una soluzione SCSS, ecco quello che ho finora:
.sunburst {
@for $ray from 1 through 26 {
$color: #eee;
$degree: 7;
@if $ray%2 == 0 {
$color: #ddd;
}
background:linear-gradient($degree+deg, transparent 50%, $color 50%, $color),
}
}
Ora il suo solo la matematica attuale dietro sto cercando di capire ... tentando di rubare la logica da pow.js, ma un po 'difficile se il tuo come terribile in matematica come sono ...
ho convertito il vostro demo in un frammento di codice overflow dello stack. (Non preoccuparti, ho mantenuto il collegamento JSFiddle anche lì). –
wow grazie, non ero a conoscenza di snippet di overflow dello stack ..non sono qui da un po ' –
grazie @ user2570380 ma sto cercando qualcosa che sia un po 'più semplice con i browser più vecchi .. mi sono imbattuto in questo però ... –