슬라이딩 밑줄 링크 만드는 방법 5가지

밑줄 링크는 웹 자체와 마찬가지로 오래되었다.밑줄은 사용자에게 다른 곳으로 연결될 정보를 제공합니다.기본적으로 모든 링크에는 밑줄이 달려 있어 많은 사이트에 충분하다.
그러나 밑줄에 운동을 추가하면 유쾌한 마이크로 애니메이션을 만들 수 있고 사이트의 활력을 불어넣을 수 있습니다.내 유행어가 맞나?

밑줄 다시 만들기

밑줄 변환을 깊이 연구하기 전에 먼저 본체 닻점 밑줄을 다시 만들어야 한다.
우선, 우리는 링크가 링크라는 것을 표시하기 위해 색을 추가할 것입니다. 우리는 자신의 밑줄을 설정할 수 있도록 본 컴퓨터의 밑줄을 제거할 것입니다.

a {
  color: saddlebrown;
  text-decoration: none;
}

여기서 우리는 절대적으로 포지셔닝된 위조원소(즉 ::before를 사용하여 우리가 원하는 효과를 실현할 수 있다.그러나 절대적인 포지셔닝은 한 줄에 밑줄만 보이기 때문에 나는 이 노선을 걷는 것을 권장하지 않는다. 네가 그것을 사용해서 한 줄을 넘지 않을 것이라고 확신하는 일을 하지 않으면.
따라서 여러 줄 밑줄을 만드는 유일한 다른 옵션은 background 속성을 사용하는 것입니다.background-color의 크기나 위치를 변경할 수 없기 때문에 background-image 를 사용해야 합니다.나는 점차적으로 같은 색을 반복한다. 왜냐하면 나는 배경을 순수한 색으로 만들려고 하지만, 너는 그것을 진정한 점차적으로 바꾸어 색을 증가시킬 수 있기 때문이다.

a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
}

그라데이션 세트를 사용하면 전체 앵커 포인트의 배경이 지정된 색상/그라데이션이 되므로 밑줄처럼 보이도록 크기와 위치를 변경해야 합니다.
우리는 background-size의 너비를 100%, 높이를 0.1em 로 설정합니다. - 텍스트 크기가 바뀌면 배율에 따라 밑줄을 축소하기 때문에em을 사용합니다.background-position-y을(를) 100%로 설정하고 앵커 포인트 아래쪽에 밑줄을 놓아 밑줄처럼 보이게 합니다.
나중에 밑줄 친 애니메이션을 설정할 수 있도록 전환도 추가할 것입니다.

a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 100% 0.1em;
  background-position-x: 0%;
  background-position-y: 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

Edit on CodePen

1. 미끄러짐 및 미끄러짐

이 효과가 있으면, 우리는 링크를 만들어서 멈출 때 왼쪽에서 오른쪽으로 밑줄을 그을 것입니다.마우스가 오프 위치에 멈추면 밑줄이 왼쪽으로 미끄러져 사라집니다.
우리는 처음에 background-size 너비를 0% 로 설정하여 그것을 숨겼다.멈췄을 때 우리는 그것을 100% 로 바꾸어 왼쪽에서 오른쪽으로 미끄러지게 했다.
방향을 반대로 바꾸려면 background-position-x 를 100% 로 변경하고 시작 위치를 오른쪽으로 변경합니다.

a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 0% 0.1em;
  background-position-y: 100%;
  background-position-x: 0%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 0.1em;
}

Edit on CodePen

2. 미끄러지다

우리가 이런 효과가 있는 링크에 멈추면 선은 중간에서 시작하여 동시에 좌우 가장자리까지 뻗는다.서스펜션이 닫히면 선이 가운데로 미끄러져 사라집니다.
이것과 앞의 유일한 차이점은 우리가 background-position-x 를 50% 로 바꾸어 밑줄의 시작점이 중간에 있게 하는 것이다.

a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 0% 0.1em;
  background-position-y: 100%;
  background-position-x: 50%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 0.1em;
}

Edit on CodePen

3. 미끄러져 나가다

이 효과가 있는 링크에 멈추는 것은 첫 번째 효과와 똑같아 보입니다.그러나 서스펜션을 닫으면 밑줄이 왼쪽으로 튕기지 않고 오른쪽으로 미끄러집니다.
불행하게도 CSS에는 hover off 위조 클래스가 없지만 일부CSS tricks to mimic it for certain effects는 있습니다.
우리는 기본적으로 같은 CSS 기교를 사용하지만, 여기에서 우리는 밑줄을 처음에 볼 수 없었던 장점을 이용했다.우리는 초기 스타일 설정background-position-x: 100%을 사용하여 서스펜션이 닫힐 때 오른쪽으로 미끄러지게 하고 서스펜션할 때 라인을 왼쪽에서 들어갈 수 있도록 변경합니다 0%.

a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 0% 0.1em;
  background-position-y: 100%;
  background-position-x: 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 0.1em;
  background-position-x: 0%;
}

Edit on CodePen

4. 가운데로 미끄러진다

이런 효과를 통해 우리는 두 개의 선이 바깥쪽에서 시작하여 안쪽으로 미끄러져 중간이 될 때까지 있다.멈추면 가장자리로 미끄러져 사라진다.
우리는 두 개의 다른 선이 있기 때문에, 우리는 두 개의 선형 점차적인 변화를 만들어야 한다.다른 배경 속성을 추가하려면 각 항목의 값 뒤에 쉼표를 추가해야 합니다.그러나 둘 다 같은 값을 가지면 CSS는 이것만 반복합니다.이것은 모든 선형 점차적인 배경 속성이 같다면, 우리는 모든 배경 속성을 수동으로 복사할 필요가 없다는 것을 의미한다.
이 선의 다른 모든 것은 똑같기 때문에, 우리는 그것들의 위치를 조정할 수 있을 뿐이다.첫 번째 줄background-position-x을 왼쪽 가장자리에서 시작하고 두 번째 줄을 오른쪽 가장자리에서 시작하도록 0% 로 설정합니다.

a {
  color: saddlebrown;
  background-image: linear-gradient(#d99a5a, #d99a5a), linear-gradient(#d99a5a, #d99a5a);
  background-size: 0% 0.1em;
  background-position-y: 100%;
  background-position-x: 0%, 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
  text-decoration: none;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 0.1em;
}

Edit on CodePen

밑줄 변형이 항상 표시됩니다.

밑줄이 항상 존재하기를 원한다면, 앞의 네 가지 효과를 사용할 수 있습니다.유일한 차이점은 동일한 100% 효과로 추가 밑줄을 추가해야 한다는 것이다.중간 효과의 슬라이드에 대해 세 번째 효과linear-gradient를 추가해야 합니다. 이 효과는 이미 두 개를 사용했기 때문입니다.

/*
// Shared Styles
*/
a {
  color: saddlebrown;
  background-image: linear-gradient(#d99a5a, #d99a5a), linear-gradient(saddlebrown, saddlebrown);
  background-size: 0% 0.1em, 100% 0.1em;
  background-position-y: 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
  text-decoration: none;
}

/*
// Slide in & back
*/
.slide-in-back {
  background-position-x: 0%;
}

.slide-in-back:hover,
.slide-in-back:focus,
.slide-in-back:active {
  background-size: 100% 0.1em, 100% 0.1em;
}

/*
// Slide in & out
*/
.slide-in-out {
  background-position-x: 100%;
}

.slide-in-out:hover,
.slide-in-out:focus,
.slide-in-out:active {
  background-size: 100% 0.1em, 100% 0.1em;
  background-position-x: 0%;
}

/*
// Slide middle out
*/
.slide-middle-out {
  background-position-x: 50%;
}

.slide-middle-out:hover,
.slide-middle-out:focus,
.slide-middle-out:active {
  background-size: 100% 0.1em, 100% 0.1em;
}

/*
// Slide to middle
*/
.slide-to-middle {
  background-image: linear-gradient(#d99a5a, #d99a5a), linear-gradient(
      #d99a5a,
      #d99a5a
    ), linear-gradient(saddlebrown, saddlebrown);
  background-size: 0% 0.1em, 0% 0.1em, 100% 0.1em;
  background-position-x: 0%, 100%;
}

.slide-to-middle:hover,
.slide-to-middle:focus,
.slide-to-middle:active {
  background-size: 100% 0.1em, 100% 0.1em, 100% 0.1em;
}

Edit on CodePen

5. 맨 위로 미끄러짐

이 효과를 얻기 위해서 우리는 시종일관 보이는 밑줄을 가지고 있지만, 멈출 때, 우리는 밑줄을 닻점의 꼭대기까지 늘린다.
이 밑줄은 텍스트 아래로 미끄러지기 때문에 사용 중인 색상이 contrast checker 을 통해 액세스 가능성을 확보해야 합니다.
밑줄이 항상 보이기를 원하기 때문에 기본값linear-gradient의 너비를 background-size 로 변경합니다.밑줄을 링크 상단으로 미끄러뜨리기 위해 100% 높이를 background-size 로 변경합니다.

a {
  color: black;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 100% 0.1em;
  background-position-y: 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 100%;
}

Edit on CodePen

보너스

이렇게 멀리 갈 수 있도록 작은 선물을 하나 드릴게요.나는 트위터에서 이런 효과를 보았는데, 이것이 바로 내가 이 글을 쓰도록 격려한 원인이다.
작성a CodePen, 기존 밑줄에 밑줄 애니메이션을 설정합니다.
Jhey's Egghead tutorial. 에서 이 효과를 만드는 방법 이해

또 있어요?

멋진 밑줄 연결 효과가 있나요?보고 싶어요!
나에게 보내거나 나를 통해contact page!