[TIL] box-shadow로 광원 효과처럼 보이네?

요즘 그냥 Github 페이지로 배포하는데 되게 되게 편해보여서 Github 페이지를 이용해서 여러개를 배포해보고 있었다..

그러다가 오늘은 css-animation-study라는 레포를 만들고 animation 스킬들을 공부해야겠다는 마음가짐으로 하나 공부했고, 이걸 Github 페이지로 배포해봤다.

 

shinkeonkim.github.io/css-animation-study/shining-loading/

Shining Loading

아무튼, 들어가보면 뭔가 빛나는 로딩 애니메이션이 나온다.

 

www.youtube.com/watch?v=Xrx9v6DhzDo&ab_channel=Errichto2

이 영상을 참고했는데, 거의 코드 똑같음... 

CSS를 쓸 줄은 알았지 이렇게 예쁘게 만들어보려고 노력도 안해봤어서 일단 카피해보면서 스킬을 얻으려 한다!

 

오늘은 대충 아래와 같이 코드를 쓰면!

.container .loader::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    width: 20px;
    height: 20px;
    background-color: #e16e6a;
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 10px #e16e6a,
                0 0 20px #e16e6a,
                0 0 30px #e16e6a,
                0 0 40px #e16e6a,
                0 0 50px #e16e6a,
                0 0 60px #e16e6a,
                0 0 70px #e16e6a,
                0 0 80px #e16e6a,
                0 0 90px #e16e6a,
                0 0 100px #e16e6a;
}

box-shadow 부분에서 3번째 인자가 blur에 해당하는데, 이를 크게 할 수록 흐려지는 효과를 줄 수 있다.

근데, 이걸 여러개 같은 색깔로 중첩한다? 그러면 뭔가 이렇게 빛나는 효과가 난다..신기함..!

 

아무튼... 작성한 코드는 아래 Github에서 볼 수 있지만, 유튜브에서 보면서 짜보는 걸 추천함... 되게되게 신기함.

github.com/shinkeonkim/css-animation-study/tree/master/shining-loading

shinkeonkim/css-animation-study