[css] 네온사인 애니메이션 css

const UniversePage = () =>{
    return (
        <>
            <NavBar/>
            <Background>
                <Sun src={require("../../assets/graphic/sun.png")}></Sun>
                <Orbit1></Orbit1>
            </Background>
        </>)
}

const neon_flicker = keyframes`
    0% {
        box-shadow: 
        inset 0 0 10px rgba(255, 255, 255, 0.4), 0 0 10px rgba(255, 255, 255, 0.4), 
        inset 0 0 15px rgba(255, 255, 255, 0.4), 0 0 15px rgba(255, 255, 255, 0.4),
        inset 0 0 25px rgba(255, 255, 255, 0.4), 0 0 25px rgba(255, 255, 255, 0.4);
    }
    100% {
        box-shadow: 
        inset 0 0 15px rgba(255, 255, 255, 0.4), 0 0 15px rgba(255, 255, 255, 0.4), 
        inset 0 0 25px rgba(255, 255, 255, 0.4), 0 0 25px rgba(255, 255, 255, 0.4),
        inset 0 0 35px rgba(255, 255, 255, 0.4), 0 0 35px rgba(255, 255, 255, 0.4);
    }
`;

const Orbit1 = styled.div`
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background-color: transparent;
    border: 1.2px solid white;
    animation: ${neon_flicker} 1.5s infinite alternate;
`;

 

animation: ${neon_flicker} 1.5s infinite alternate;

 

첫번째는 keyframe 이름,

두번째는 지속시간,

세번째는 반복횟수(animation-iteration-count),

네번째는 재생 방향(animation-direction)

 

 

참고 블로그

https://velog.io/@jhplus13/styled-component%EC%97%90%EC%84%9C-animation%EC%A3%BC%EB%8A%94%EB%B2%95 

https://developer.mozilla.org/ko/docs/Web/CSS/animation

https://ctrlcccv.github.io/code/2023-10-15-neon/