[css] 가상 요소, hover transition, 그라디언트 transition 주기

 

💨 부모 요소에 opacity를 주면 자식 요소의  opacity도 변하는데, 그것을 막기 위해 가상 요소를 썼다.

💫 그냥 color -> gradient transition은 깜빡임이 발생한다! 

🤍 gradient는 transition 효과가 없다.

 

 

 

 

💨 부모 요소에 opacity를 주면 자식 요소의  opacity도 변하는데, 그것을 막기 위해 가상 요소를 썼다.

찍어놓은 건 아니지만, 재생 아이콘이 같이 투명해지는 문제를 수정해달라고 하셔서~~~

 

export const PlayBtn = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  width: 72px;
  height: 72px;
  flex-grow: 0;

  ::after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    background-image: linear-gradient(135deg, #000 0%, #000 100%);
    border-radius: 50%;
    opacity: 0.6;
    transition: all 0.8s;
  }

  svg {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
`;

(여기서 svg는 재생 아이콘이다) 가상요소 위로 보내려고 z-index를 썼다. position: relative; 를 써도 되는 것 같은데 그러면 위치를 잡을 수 없어서 z-index를 썼다... 

 

::after를 만들고 원래 요소랑 똑같이 만들고 opacity를 여기다가 적용시키면 된다! 그럼 자식 요소에 영향을 미치지 않는다.

 

 

 

💫 그냥 color -> gradient transition은 깜빡임이 발생한다! 

    background: black;
    
    // :hover
    background: linear-gradient(135deg, #007ff4 0%, #6f00c6 100%);

이 상태로 transition을 주면 이상하게 깜빡거린다. 

그냥 color랑 gradient 값의 중간은 없을테니... 당연한 것 같기도 하다.

 

 

🤍 gradient는 transition 효과가 없다.

 

transition 효과가 먹지 않는다!!! 그래서 이것도 가상요소를 이용한다. 

 

export const PlayBtn = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  width: 72px;
  height: 72px;
  flex-grow: 0;

  ::before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    background-image: linear-gradient(135deg, #007ff4 0%, #6f00c6 100%);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.8s;
  }

  ::after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    background-image: linear-gradient(135deg, #000 0%, #000 100%);
    border-radius: 50%;
    opacity: 0.6;
    transition: all 0.8s;
  }

  svg {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
`;

여기서 ::before랑 ::after만 보면 될 것 같다.

 

export const GameBox = styled.div`
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.8s ease-in-out;
  &:hover {
    cursor: pointer;

    ${GameImg} {
      transform: scale(1.2);
    }

    ${GameTitle}::after {
    }
    ${PlayBtn}::before {
      opacity: 0.6;
    }
    ${PlayBtn}::after {
      opacity: 0;
    }
  }
  margin-bottom: 64px;
`;

hover 이벤트는 GameBox라는 부모요소에 주었다.

 

일단 hover가 아닐시의 색, opacity를 깔아놓는다. (난 svg 요소 때문에 after에다가 해놓았다.)

그리고 가상요소(before 또는 after)에 hover시의 색을 까는데, opacity 0으로 깔아놓는다!

 

hover시엔 서로의 opacity를 맞바꾼다! opacity는 단계별로 transition 이뤄지고 그럼 이렇게 부드럽게 그라디언트가 바뀐다~ 

 

 

 

https://blog.rhostem.com/posts/2021-05-12-linear-gradient-text

blog.rhostem.com

https://keithjgrant.com/posts/2017/07/transitioning-gradients/

Transitioning Gradients