동적 링크 밑줄을 그리는 CSS3 방법-CSS 튜토리얼-php.cn

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

高洛峰

풀어 주다： 2017-03-07 14:19:10

원래의

1510명이 탐색했습니다.

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

<!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 중국어 웹사이트를 주목하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

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