[CSS] 반짝이는 이펙트 만들기

ksj0314·2024년 8월 1일

목록 보기

6/6

위 페이지에서 Star, 오늘 뭐먹지?, Mini-MapleStory는 버튼이다.
사용자에 따라서 버튼으로 인식하지 못할 경우를 생각하여 반짝이는 이펙트를 넣으려고 한다.

1. 하얀 박스가 지나가는 이펙트

const Effect = styled.div`
  ${props => !props.isSelected && css`
    width: 100%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.9;
    background-image: linear-gradient(to bottom, transparent 0%, white 50%, transparent 100%);
	animation: ${Anima} 2s ease-in-out infinite;
  `}
`

우선 버튼 안에 넣을 Effect라는 요소를 만들고 position 설정으로 버튼 위로 겹쳐지게 만든다.
이펙트 두께를 늘리려고 height를 200%를 주었고
하얀 박스가 지나가는것 보다는 그라데이션을 주는게 자연스러워서 linear-gradient를 사용하였다.

const Anima = keyframes`
    0%{
        transform: translate(-100%, -100%) rotateZ(-45deg);
    }
    70%{
        transform: translate(100%, 100%) rotateZ(-45deg);
    }
    100%{
        transform: translate(100%, 100%) rotateZ(-45deg);
    }
`;

위 처럼 keyframes을 설정하면 버튼 위로 지나가는 Effect 컴포넌트가 만들어진다. (잘 보이게 잠시 빨간색으로 설정함)

버튼에 overflow: hidden을 설정하면 완성

2. linear-gradient

linear-gradient 속성을 사용해서 위 이미지를 애니메이션을 넣어 자연스럽게 변화시키고자 했다.

그런데 keyframes로 애니메이션을 넣을때 linear-gradient는 지원하지 않는다고 한다!

그래서 직접 비슷하게 만들어보기로 했다.

const Effect = styled.div`
  ${props => !props.isSelected && css`
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation: ${Anima} 1.5s linear infinite;
  `}
`;

동일한 크기의 Effect 컴포넌트를 만들고 애니메이션을 주었다.

const Anima = keyframes`
    0% {
        opacity: 0;
        background-image: linear-gradient(to right bottom, white 0%, transparent 100%);
    }
    10%{
        opacity: 0.8;
        background-color: transparent;
    }
    20% {
        background-color: white;
        background-image: linear-gradient(to right bottom, white 0%, transparent 100%);
    }
    21%{
        background-image: linear-gradient(to right bottom, transparent 0%, white 100%);
    }
    30% {
        opacity: 0.8;
        background-color: transparent;
    }
    40% {
        opacity: 0;
    }
`;

0% ~ 10% : linear-gradient의 첫번째 상태를 opacity로 서서히 나타나게 한다.
10% ~ 20% : background-color를 투명에서 하얀색으로 서서히 나타나게 한다.