[CSS] 📝 밑줄 애니메이션 작성법.

목차

CSS로 밑줄 애니메이션 만들어보자

프론트엔드 작업을 하다보면 강조하고 싶은 글들이 있을 때 형광펜 효과나 애니메이션 효과를 사용해야 할 때가 있다.  왜냐하면 형광펜 효과나 애니메이션 효과가 들어가게 되면 방문자들에게 좀 더 좋은 UI를 제공할 수 있기 때문이다.

 

저는 첫번째 예제 파일에서는 CSS를 이용한 밑줄 효과를 작성했는데, 이것은 "형광펜으로 밑줄을 그은 듯한 느낌의 CSS 스타일"로, 3가지 종류의 예시를 작성해보았다. 두번째 예제 파일에서는 "마우스 호버시 밑줄이 나타나는 애니메이션 CSS"를 작성해보았다.

---

형광펜 밑줄 효과

우선 <mark>태그만 사용한 경우

• mark 태그를 사용하면 기본적으로 노란색 형광펜이 칠해진 상태가 된다.

HTML

/* HTML */
<p>HTML의 <mark>mark tag만 사용한</mark> 형광펜 효과.</p>

<p>
  HTML의 <mark class="green">mark tag만 사용한</mark> 형광펜 효과(초록색).
</p>

/* CSS */
mark.green {
  background-color: rgba(80, 255, 0, 0.3);
}

---

CSS의 배경색(background-image)를 사용한 경우

• background-color, background-image의 linear-gradient 속성을 활용한 예제.

HTML

/* HTML */
<p>
  <span class="highlight">CSS의 배경색(background-color)</span>을 이용한
  형광펜 효과
</p>

<p>
  <span class="highlight two-highlight">CSS의 배경색(background-color)</span
  >을 이용한 형광펜 효과(두가지색)
</p>

/* CSS */
.highlight {
  background-color: #fff2ac;
  background-image: linear-gradient(to right, #ffe359 0%, #fff2ac 100%);
}

.highlight.two-highlight {
  background-color: #fff2ac;
  background-image: linear-gradient(
    to right,
    rgb(132, 250, 176) 0%,
    rgb(143, 211, 244) 100%
  );
}

---

형광펜으로 밑의 반만 줄을 그은듯한 효과

• 형관펜으로 밑의 부분 반만 밑줄을 긋고 싶다면 50%를 중간에 넣어주면 적용된다.

HTML

/* HTML */
<p>
  <span class="half-highlight">CSS의 배경색(background-color)</span>을
  이용한 형광펜으로 반만 밑줄 그은 효과
</p>

/* CSS */
.half-highlight {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, #ffd0ae 50%);
}

---

🚀 예제 파일

• 위에서 작성한 3가지 예제를 codeSandBox에서 구현한 예제 파일.

---

마우스를 올려 놓으면 밑줄이 그어지는 애니메이션 효과

왼쪽에서 오른쪽으로 이동하는 애니메이션

• 밑줄이 Hover 시에 왼쪽에서 오른쪽으로 이동하는 애니메이션 예제.

HTML

/* HTML */
<p>
    <span class="to-right-underline">왼쪽에서 오른쪽으로 이동하는 Animation</span>
</p>

/* CSS */
.to-right-underline {
  position: relative;
}
.to-right-underline:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 0px;
  height: 2px;
  margin: 5px 0 0;
  transition: all 0.2s ease-in-out;
  transition-duration: 0.3s;
  opacity: 0;
  background-color: #8fd3f4;
}
.to-right-underline:hover:after {
  width: 100%;
  opacity: 1;
}

---

가운데서 좌우로 펼쳐지는 애니메이션

• 밑줄이 Hover 시에 가운데서 좌우로 펼쳐지는 애니메이션 예제.

HTML

/* HTML */
<p>
    <span class="spread-underline">가운데서 좌우로 펼쳐지는 라인 Animation</span>
</p>

/* CSS */
.spread-underline {
  color: #333;
  text-decoration: none;
  display: inline-block;
  padding: 15px 0;
  position: relative;
}
.spread-underline:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #ffb000;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
.spread-underline:hover:after {
  width: 100%;
  left: 0;
}

---

형광펜 효과가 위로 올라오는 애니메이션

• 밑줄이 Hover 시에 형광펜 효과가 위로 올라오는 애니메이션 예제.

HTML

/* HTML */
<p>
    <span class="highlight">형광펜 효과가 위로 올라오는 Animation</span>
</p>

/* CSS */
.highlight {
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  background-repeat: no-repeat;
  background-size: 100% 50%;
  background-position: 0 88%;
  transition: background-size 0.25s ease-in;
}
.highlight:hover {
  background-size: 100% 100%;
}

---

밑줄이 위에서 살짝 떨어지는 애니메이션

• 밑줄이 Hover 시에 밑줄이 위에서 살짝 떨어지는 애니메이션 예제.

HTML

/* HTML */
<p>
    <span class="drop-in-underline">위에서 살짝 떨어지는 Animation</span>
</p>
    
/* CSS */
.drop-in-underline {
  position: relative;
  padding-bottom: 10px;
}
.drop-in-underline:before {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #b9f;
}
.drop-in-underline:before {
  opacity: 0;
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
  -webkit-transition: opacity 0s,
    -webkit-transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0s,
    -webkit-transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s;
  transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s,
    -webkit-transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.drop-in-underline:hover:before {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: opacity 0.2s,
    -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.2s,
    -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.2s;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.2s, -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

---

🚀 예제 파일

• 위에서 작성한 3가지 예제를 codeSandBox에서 구현한 예제 파일이다.

---

참고 문헌

• 1다양한 CSS 밑줄 효과 소스코드
• 2CSS3 밑줄 그리기 + 크기 색상 위치 제어하고 애니메이션 까지!?