집 > 기사 > 웹 프론트엔드 > 동적 링크 밑줄을 그리는 CSS3 방법

동적 링크 밑줄을 그리는 CSS3 방법

高洛峰원래의: 2017-03-07 14:19:101532검색

링크 밑줄은 매우 일반적인 스타일입니다. 최근에 아주 간단한 시각적 효과를 만들어 봤는데, 전체 코드를 확인해 보세요.

<!DOCTYPE html>
<html>
<head>
  <meta charset="gb2312">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style>
body{   
  background-color: #000;   
}   

h2{    
  text-align: center;   
  margin-top: 100px;   
}   

h2 > a {   
  position: relative;   
  color: #FFF;   
  text-decoration: none;   
  padding-bottom: 5px;   
}   

h2 > a:hover {   
  color: #FFF;   
}    

h2 > a:before {   
  content: "";   
  position: absolute;   
  width: 100%;   
  height: 2px;   
  bottom: 0;   
  left: 0;   
  background-color: #FFF;   
  visibility: hidden;   
  -webkit-transform: scaleX(0);   
  transform: scaleX(0);   
  -webkit-transition: all 0.3s ease-in-out 0s;   
  transition: all 0.3s ease-in-out 0s;   
}   

h2 > a:hover:before {   
  visibility: visible;   
  -webkit-transform: scaleX(1);   
  transform: scaleX(1);   
}   
</style>
</head>
<body>
   <h2>
     <a href="/">悬停在我上面</a>
   </h2>
</body>
</html>

이 효과를 만드는 것은 매우 간단합니다. HTML에 추가 DOM 요소를 추가할 필요는 없지만 이전 버전의 브라우저 호환성 문제를 고려해야 합니다. 브라우저에서는 단지 일반 밑줄로 표시됩니다.

자, 이제 본격적으로 시작됩니다. 가장 먼저 해야 할 일은 텍스트 장식을 제거하고 링크를 상대 위치로 설정하는 것입니다. 마우스를 가져갈 때 링크의 색상이 변경되지 않도록 해야 합니다. 여기서는 h2를 예로 들어 보겠습니다.

h2 > a {   
      position: relative;   
      color: #000;   
      text-decoration: none;   
}   

h2 > a:hover {   
      color: #000;   
}

다음으로 테두리를 추가하고 변환을 통해 숨겨야 합니다. :before를 삽입하고 scaleX(0)를 설정합니다. 브라우저가 이를 지원하지 않으면 visible:hidden으로 숨깁니다.

h2 > a:before {   
      content: "";   
      position: absolute;   
      width: 100%;   
      height: 2px;   
      bottombottom: 0;   
      left: 0;   
      background-color: #000;   
      visibility: hidden;   
      -webkit-transform: scaleX(0);   
      transform: scaleX(0);   
      -webkit-transition: all 0.3s ease-in-out 0s;   
      transition: all 0.3s ease-in-out 0s;   
}

마지막으로 애니메이션 시간을 0.3초로 설정했습니다. 이제 마우스를 가져갈 때 표시할 요소와 scaleX(1)만 설정하면 됩니다.

h2 > a:hover:before {   
      visibility: visible;   
      -webkit-transform: scaleX(1);   
      transform: scaleX(1);   
}

끝났습니다!

이렇게 하면 매우 역동적인 밑줄 애니메이션이 완성됩니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

동적 링크 밑줄을 그리는 CSS3 방법과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

성명：

이전 기사：인라인 요소와 블록 수준 요소의 차이점에 대한 자세한 소개다음 기사：인라인 요소와 블록 수준 요소의 차이점에 대한 자세한 소개

동적 링크 밑줄을 그리는 CSS3 방법

관련 기사