css3 koło świeci jak blask księżyca

Próbuję stworzyć księżyc z lekkim blaskiem. tak jak na zdjęciach.css3 koło świeci jak blask księżyca

Próbowałem, ale niewiele się udało.

Nie chcę używać obrazu na stronie internetowej. Chcę utworzyć tylko to z CSS3.

Moje koło tworzy bardzo małe, a także poświata jest na małym obszarze. chcę świecić w dużym obszarze promienia

http://jsfiddle.net/naresh_kumar/ezUfG/6/

enter image description here

HTML

<div> 
    <span>Glow</span> 
</div>

CSS

div { 
    margin: 20px 10px 10px; 
    text-align: center; 
    font-family: sans-serif; 
} 

span { 
    display: inline-block; 
    padding-top: 40px; 
    background: whiteSmoke; 
    width: 100px; 
    height: 60px; 
    text-align: center; 
    vertical-align: middle; 

    -webkit-box-shadow: 0 0 10px #F8A50E; 
     -moz-box-shadow: 0 0 10px #F8A50E; 
      box-shadow: 0 0 10px #F8A50E; 

    -webkit-border-radius: 50px; 
     -moz-border-radius: 50px; 
      border-radius: 50px; 

    -webkit-transition: box-shadow .4s ease; 
     -moz-transition: box-shadow .4s ease; 
     -ms-transition: box-shadow .4s ease; 
     -o-transition: box-shadow .4s ease; 
      transition: box-shadow .4s ease; 
} 

span:hover { 
    -webkit-box-shadow: 0 0 10px red; 
     -moz-box-shadow: 0 0 10px red; 
      box-shadow: 0 0 0 10px red; 
}

Źródło

2013-06-19 John Harper

Nie wiem, co robisz ze swoim HTML tam. Oddziel swój CSS od kodu HTML. – kleinfreund

Sądzę też, że możesz bezpiecznie ommitować prefiks '-moz' dla box-shadow ([tabela wsparcia] (http://caniuse.com/#feat=css-boxshadow)) i' -moz', '- przedrostki ms' i '-o' na przejściach. ([tabela wsparcia] (http://caniuse.com/#feat=css-transitions)). ** edit: ** border-radius nie potrzebuje więcej prefiksów w ogóle. ;) – kleinfreund

zastosowanie box-shadow :)

Przykład wykorzystuje dwa oddzielony przecinkami cieni:

box-shadow:0 0 50px gold,0 0 150px gold;

http://codepen.io/gcyrillus/pen/qdcos

Można wyciągnąć go w gradiencie za promieniowych. Wynik będzie różny dla różnych przeglądarek i przeglądarek.

Źródło

2013-06-19 11:19:21

k thanx. czy mógłbyś bardziej przybliżyć mi ten problem? ? –

Twój cień musi być większy, a aby go wzmocnić, musisz używać wielu cieni, aby nie zanikł zbyt szybko. w tym przykładzie 2 cienie nakładają się na pierwsze 50 pikseli. Możesz nawet zwiększyć efekt za pomocą czwartego pola parametru-shadow: 0 0 50px 10px gold, 0 0 150px 10px gold; jodły 10 pikseli cienia będą miały bardzo wysoką siłę krycia (blisko 1) –

Zamiast tego stylu dla box-shadow:

box-shadow: 0 0 0 10px red;

Spróbuj tego:

box-shadow: 0 0 10px red;

Edit: Jeśli chcesz blask być większy, po prostu zwiększyć promień:

box-shadow: 0 0 30px red;

jsFiddle here

Źródło

2013-06-19 11:17:18 George

Moje koło tworzy bardzo małe, a także poświata jest na małym obszarze. Chcę świecić w dużym obszarze promienia ... I proszę pana, gdzie jest aktualizacja. –

Aktualizacja wykonana, po prostu kliknij tam, gdzie jest napisane * jsFiddle here * – George

Twój link do tego linku http://jsfiddle.net/ezUfG/9/ czy to twój? i nie ma żadnej aktualizacji. –

Wierzę, że to, co chcesz:

span:hover { 
    -webkit-border-radius: 70px; 
    -moz-border-radius: 70px; 
    border-radius: 70px; 
    -webkit-box-shadow:0px 0px 10px red; 
    -moz-box-shadow: 0px 0px 10px red; 
    box-shadow: 0px 0px 10px red; 
}

Demo: http://jsfiddle.net/ezUfG/10/

Źródło

2013-06-19 11:24:10 Syd

css3 koło świeci jak blask księżyca

Odpowiedz

Powiązane problemy