[css] animation 활용한 그라디언트 배경

잠이 안와서 블로그를 꾸미려다가 문득 프로필 이미지를 레어카드 마냥 번쩍이는 효과를 주고 싶어졌음

그러기 위해서 계획한것

• 금색 테두리를 준다 (금색이면 레어한것처럼 보이지않을까)
• 내부는 반투명한 배경을 주고 그라데이션을 동적으로 줘 빛나는 효과를 줘본다

우선 처음에는 linear-gradient를 동적으로 주려고 했는데 그건 계산을 해서 주기가 너무 힘든거 같아, 노선을 변경함

배경을 주고 background-position을 왼쪽 위에서 오른쪽 아래 대각으로 움직여주는 것

 

화면 구조는 이런 형식으로 이루어져있었기 때문에

<div>
    <div class="iamge-deco"/>
    <img/>
</div>

우선 이미지위에 얹어줄 카드(iamge-deco)를 만들었음

.image-deco{
  width:150px;
  height: 171px;
  border-radius: 15px;
  background: linear-gradient(137deg, rgba(255,246,183,0.2), rgba(247,124,153,0.2), rgba(101,120,242,0.2), rgba(194,255,216,0.2));
  background-size: 400% 400%;
  animation: imageCardEffect 3s infinite linear;
  position: absolute;
  left: 29px;
}

width,height,border-radius는 프로필 이미지 사이즈에 맞춰줬고,

position을 사용해서 위치를 좀 조정해줬음

 

최대한 레어틱?한 표현을 주기 위해 컬러코드표를 참고해서 배경을 넣어줬고, 

이제 animation을 만들어줄 차례가 됐음

 

@keyframes imageCardEffect{
  0%{
  border: 1.5px solid #f9f295;
  background-position: 0 0;
  }
  5%{
    border: 1.5px solid #e0aa3e;
    background-position: 20% 20%;
  }
  10%{
    border: 1.5px solid #e0aa3e;
    background-position: 40% 40%;
  }
  15%{
    border: 1.5px solid #b88a44;
    background-position: 60% 60%;
  }
  20%{
    border: 1.5px solid #e0aa3e;
    background-position: 80% 80%;
  }
  25%{
    border: 1.5px solid #e0aa3e;
    background-position: 100% 100%;
  }
  30%{
    border: 1.5px solid #f9f295;
    background-position: 80% 80%;
  }
  45%{
    border: 1.5px solid #e0aa3e;
    background-position: 60% 60%;
  }
  60%{
    border: 1.5px solid #e0aa3e;
    background-position: 50% 50%;
  }
  75%{
    border: 1.5px solid #e0aa3e;
    background-position: 30% 30%;
  }
  90%{
    border: 1.5px solid #f9f295;
    background-position: 10% 10%;
  }
  100%{
    border: 1.5px solid #e0aa3e;
    background-position: 0 0;
  }
}

처음에는 0%에서 100% 만 주었는데 뭔가 원하는것처럼 부드러운 느낌은 들지않아서 좀 더 세분화 시켜서 나눴고

background-position을 가로축 세로축을 조정해서 빛비추는 효과를 넣어줬음

border가 원래 3px이였는데 선이 앏을 수록 고급진느낌인거같아서 절반으로 줄임

 

완성된 느낌은 이런데 생각보다는 레어한느낌은 아닌거같아 속상함