웹서핑 하다가 nav 부분에 마우스 호버하면 밑줄이 생기는 사이트를 보고
해본 적 없는 디자인이라 개발자모드로 들어가서 봤는데 hover 부분 코딩을 어케했는지 모르겠는거.. ㅠ
그래서 구글링해서 찾아봤습니다~
은근 가지수가 많더라고요!
3가지 정도 정리해서 올려봅니당..
(내가 나중에 찾아보려고 만드는 포스팅 ㅋㅋ)
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{list-style: none; text-decoration: none; font-family: sans-serif; font-weight: bold; font-size: 0.9rem;}
#index_wrap ul {display: block; margin-bottom: 50px;}
#index_wrap ul li {position: relative; display: inline-block; margin: 0 20px; height: 40px; text-align: center; line-height: 30px; cursor: pointer;}
#index_wrap ul p {font-size: 1.1rem; font-weight:800;}
#index_wrap ul li a {color: #000;}
#leftToRight li::after {position: absolute; content:""; display: block; border-bottom: 3px solid #000; transition: width 250ms ease-out; left: auto; right: 0; width: 0;}
#leftToRight li:hover::after {width: 100%; left: 0; right: auto;}
#fromInsideOut li::after {position: absolute; content:""; display: block; border-bottom: 3px solid #000; transition: all 250ms ease-out; left: 50%; width: 0;}
#fromInsideOut li:hover::after {transition: all 250ms ease-out; left: 0%; width: 100%;}
#stretch li::after {position: absolute; content:""; display: block; border-bottom: 3px solid #000; transition: width 250ms ease-in-out; left: auto; width: 0;}
#stretch li:hover::after {width: 100%;}
</style>
</head>
<body>
<div id="index_wrap">
<ul id ="leftToRight">
<p>왼쪽에서 오른쪽으로</p>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">DESIGN CASE</a></li>
<li><a href="#">STORY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<ul id ="fromInsideOut">
<p>가운데서 바깥쪽으로</p>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">DESIGN CASE</a></li>
<li><a href="#">STORY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<ul id ="stretch">
<p>늘어났다 줄어들었다</p>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">DESIGN CASE</a></li>
<li><a href="#">STORY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</body>
</html>
'꿀팁 공유 > ㄴ IT관련' 카테고리의 다른 글
| css: 마우스 hover시 이미지 앞뒤로 flip 만들기 (transform: rotateY()) (0) | 2021.06.04 |
|---|---|
| CSS로 DIV 계단 그리기 (0) | 2021.03.04 |
| 카카오톡 단톡방 사진전송 묶어보내기 & 화질 설정 (0) | 2019.12.13 |
| 인스타그램 해시태그 누락에 대한 고찰 (IP차단) (2) | 2019.02.11 |
| 옛날에 컴활 2급 독학으로 합격한 후기 + 잡담 (0) | 2018.11.25 |
댓글