CSS underline 애니메이션 😌💙

옛슬·2021년 10월 28일

CSS animation css_animation underline 웹퍼블리셔

Cooking CSS 🍳👩‍🍳🤍

목록 보기

3/5

Overview

CSS로 웹사이트를 아름답게 만드는 방법을 연구중이다🧐
그 중 underline에 애니메이션을 넣어보는 것을 공부해보기로 했다🤍

💬 이런 분들에게 추천드려요 👧👦

✅ CSS를 애정하는 사람
✅ 밑줄에 애니메이션 넣어보고 싶은 사람
✅ CSS로 애니메이션 공부하고 싶은 사람

예시를 바로 보고 싶다면 하단 [Codepen Example]을 통해 볼 수 있다! 오른쪽 목차를 이용하자 😋

Underline Style #01

background-image로 산뜻하게 그라디언트 밑줄 만들어보자!

.underline1 {
  cursor: pointer;
  color: #7DD4E7;
  
  /*2개 그라디언트 underline 만드는 방법*/
  background-image: 
   linear-gradient(rgb(176, 251, 188), rgb(176, 251, 188)),
    linear-gradient(#E5FAFF, #7DD4E7);
  background-size: 100% 2px, 100% 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat, no-repeat;
  transition: background-size 700ms linear;
}

.underline1:hover {
  background-size: 0 2px, 100% 2px;
}

우선 background-color가 아닌 background-image를 사용하는 이유는 bg-color보다 다양한 속성을 사용할 수 있기 때문이다 (background-size, background-position 등)
background-size를 하나는 0 → 100%로 하나는 100% → 0%로 변하게 하여 왼쪽에서 오른쪽 방향으로 하나의 밑줄이 다른 밑줄을 덮는 형태로 만들어줄 수 있다

Underline Style #02

background-image로 3개도 만들 수 있다

.underline2 {
   cursor: pointer;
  color: #fc00ff;
  
  /*3개 그라디언트 underline 만드는 방법*/  
    background-image: 
      linear-gradient(#FFF, #F0F0EB),  
      linear-gradient(#fc00ff, #00dbde),
      linear-gradient(#A1FFCE, #FAFFD1);
  background-size: 20px 2px, 100% 2px, 0 2px;
  background-position: calc(20px * -1) 100%, 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 2s linear, background-position 2s linear;
}

.underline2:hover {
  background-size: 20px 2px, 0 2px, 100% 2px;
  background-position: calc(100% + 20px) 100%, 100% 100%, 0 100%;
}

이것도 background-position과 background-size 속성을 사용하여 밑줄에 효과를 준듯한? 효과를 만들 수 있다.
우선 하나의 underline의 색을 컨텐츠의 백그라운드와 일치시키면 투명으로 보이는 효과를 준다.
그리고 해당 underline의 position을 왼쪽에서 오른쪽으로 이동시키는데 여기서는 calc()메서드를 활용해준다. 그 이유는 처음과 끝에 선이 자연스럽게 사라져야하기 때문에 계산을 해줘야 한다.

Underline Style #03, #04

anchor태그로 만드는 underline animation

.underline3 {
  text-decoration: underline 2px #004FF9;
  transition: text-decoration-color 300ms;
}

.underline3:hover {
  text-decoration-color: #FFF94C;
}

.underline4 {
  text-decoration: underline 2px #FFF94C;
  text-underline-offset: 0;
  transition: text-decoration-color 300ms, text-underline-offset 800ms;
}

.underline4:hover {
  text-decoration-color: orange;
  text-underline-offset: 4px;
}