[CSS] a 태그 hover 모음
목차를 클릭하면 원하는 글로 이동합니다.
[CSS] a 태그 hover 모음
a 태그 링크 모던한 디자인
1. hover effect 2
HTML
<!--hover effect 2 -->
<div class="back color-2"> <div class="row columns"> <h3>Effect 2</h3> <ul class="menu align-center expanded text-center SMN_effect-2"> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Gallery</a></li> <li><a href="">Notes</a></li> <li><a href="">Contact</a></li> </ul> </div> </div>
<!-- //hover effect 2 -->
CSS
/*hover effect 2 */
.SMN_effect-2 a:before, .SMN_effect-2 a:after { position: absolute; top: 100%; left: 0; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.5); content: ''; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform: scale(0.85); -moz-transform: scale(0.85); transform: scale(0.85); } .SMN_effect-2 a:after { opacity: 0; -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s; -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s; transition: top 0.3s, opacity 0.3s, transform 0.3s; } .SMN_effect-2 a:hover:before, .SMN_effect-2 a:hover:after, .SMN_effect-2 a:focus:before, .SMN_effect-2 a:focus:after { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); background: #c8a755; } .SMN_effect-2 a:hover:after, .SMN_effect-2 a:focus:after { top: 0%; opacity: 1; }
LIST
'나만의 티스토리' 카테고리의 다른 글
ai 이미지로 역사 유튜브 쇼츠 만들기 (0) | 2024.01.15 |
---|---|
로파이 뮤직 나도 유튜브에 올리고 돈 좀 벌어보자 (1) | 2024.01.11 |
티스토리 자동 목차 코드 및 순서 정리 (1) | 2023.12.22 |
티스토리 자동 목차 코드 및 순서 (0) | 2023.12.22 |
웹 페이지에서 하단 오른쪽에 고정된 위치에 있는 이미지 클릭시 이동 (0) | 2023.12.18 |
댓글