250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- Animation
- 프론트엔드
- iPhone
- xcode
- image
- 자바스크립트
- iOS 개발자
- 비전공자
- 애니메이션
- ipad
- CSS
- keyframes
- css3
- php
- 개발자
- 비전공 개발자
- 풀스택
- HTML
- SWIFT
- 백엔드
- button
- effect
- javascript
- front-end
- hover
- html5
- IOS
- jQuery
- react
- MAC
Archives
- Today
- Total
비전공자 개발일기
Hover Effect 본문
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HOVER EFFECT</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<ul>
<li><a href="#" data-text="Home">Home</a></li>
<li><a href="#" data-text="About">About</a></li>
<li><a href="#" data-text="Services">Services</a></li>
<li><a href="#" data-text="Team">Team</a></li>
<li><a href="#" data-text="Contact">Contact</a></li>
</ul>
</section>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #222;
overflow: hidden;
}
section ul {
position: relative;
display: flex;
flex-direction: column;
}
section ul li {
list-style: none;
}
section ul li a {
position: relative;
display: block;
text-decoration: none;
text-transform: uppercase;
font-size: 4em;
font-weight: 700;
color: #FFF;
transition: .5s;
transition-delay: .5s;
}
section ul li a:hover {
color: rgba(255, 255, 255, .1);
transform: translateY(-20px);
transition-delay: 0s;
}
section ul li a::before {
content: attr(data-text);
position: absolute;
bottom: -10px;
pointer-events: none;
z-index: 1;
font-size: .35em;
font-weight: 500;
color: #3BFFE8;
letter-spacing: 100px;
opacity: 0;
transition: .5s;
text-shadow: 0 0 10px #3BFFE8, 0 0 30px #3BFFE8, 0 0 80px #3BFFE8;
}
section ul li a:hover::before {
letter-spacing: 6px;
opacity: 1;
transition-delay: .25s;
}
728x90
LIST
'HTML _CSS' 카테고리의 다른 글
Christmas Tree (0) | 2022.09.13 |
---|---|
Growing Smiley Face Effects (0) | 2022.09.12 |
Colorful Glowing Liquid Bowl (0) | 2022.09.09 |
Paper (0) | 2022.09.08 |
Rader Loading Animation (0) | 2022.09.07 |