2.hover효과
2.마우스 오버 효과
1.1. button-hover
1.1.1. mouse-hover1
- HTML
- CSS
<a href="#"><span></span>hover me</a>body {
<a href="#"><span></span>hover me</a>
body { margin: 0; display: flex; align-items: center; justify-content: center; height: 100vh; font-family: verdana; background-color: #272727;}
a { width: 220px; height: 80px; color: #ff0; background-color: transparent; font-size: 26px; text-decoration: none; text-transform: uppercase; text-align: center; line-height: 80px; transition: all 0.5s; position: relative;}
a:before,a:after { content: ''; position: absolute; top: 50%; width: 20px; height: 20px; background-color: #ff0; border-radius: 50%; transform: translateY(-50%); transition: all 0.3s; z-index: -1; opacity: 0;}
a:before { left: 0; box-shadow: -100px 0 0 #ff0;}
a:after { right: 0; box-shadow: 100px 0 0 #ff0;}
a:hover:before { left: 50%; box-shadow: 30px 0 0 #ff0; transform: translateX(-50%) translateY(-50%); opacity: 1;}
a:hover:after { right: 50%; box-shadow: -30px 0 0 #ff0; transform: translateX(50%) translateY(-50%); opacity: 1;}
span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ff0; border-radius: 8px; transform: scale(0); transition: all 0.3s; z-index: -1;}
a:hover span { transform: scale(1); transition-delay: 0.4s;}
a:hover { color: #262626; transition-delay: 0.4s;}
1.1.2. mouse-hover2
- HTML
- CSS
<ul>body {
<ul> <li> <a href="#"> home <span></span> <span></span> <span></span> <span></span> </a> </li>
<li> <a href="#"> about <span></span> <span></span> <span></span> <span></span> </a> </li>
<li> <a href="#"> services <span></span> <span></span> <span></span> <span></span> </a> </li>
<li> <a href="#"> team <span></span> <span></span> <span></span> <span></span> </a> </li>
<li> <a href="#"> contact <span></span> <span></span> <span></span> <span></span> </a> </li></ul>
body { margin: 0; display: flex; align-items: center; justify-content: center; height: 100vh; font-family: sans-serif;}
ul { margin: 0; padding: 0; display: flex; list-style-type: none;}
ul li a { display: block; width: 120px; height: 40px; line-height: 40px; text-align: center; color: red; text-transform: capitalize; text-decoration: none; position: relative; transition: all 0.5s; color: #262626;}
a:hover { color: white;}
ul li span { position: absolute; width: 100%; height: 25%; background-color: #262626; z-index: -1; left: 0; top: 0; transform: scaleX(0); transition: all 0.5s; transform-origin: left;}
a:hover span { transform: scaleX(1);}
span:nth-child(2) { top: 25%; transition-delay: 0.15s;}
span:nth-child(3) { top: 50%; transition-delay: 0.3s;}
span:nth-child(4) { top: 75%; transition-delay: 0.45s;}
1.1.3. mouse-hover3
- HTML
- CSS
<button class="btn">button</button>body {
<button class="btn">button</button>
body { margin: 0; display: flex; align-items: center; justify-content: center; height: 100vh; font-family: sans-serif;}
.btn { border: 2px solid tomato; background: none; color: tomato; padding: 20px 40px; font-size: 25px; text-transform: uppercase; cursor: pointer; transition: all 0.5s; position: relative; color: tomato; overflow: hidden;}
.btn:hover { color: white;}
.btn:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: tomato; z-index: -1; border-radius: 50% 50% 0% 0%; height: 0%; transition: all 0.5s;}
.btn:hover:before { height: 190%;}
1.1.4. mouse-hover4
- HTML
- CSS
<!DOCTYPE html>body {
<!DOCTYPE html><html lang="ko">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CSS animatin, transitions and transforms</title>
<!-- OUR STYLESHEET --> <link rel="stylesheet" href="style.css" type="text/css" media="all">
<!-- FONT ِAWESOME --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
</head>
<body>
<ul> <li><i class="fas fa-heart"></i></li> <li><i class="fas fa-glass-martini"></i></li> <li><i class="fas fa-globe"></i></li> <li><i class="fas fa-gift"></i></li> </ul>
</body></html>
body { margin: 0; display: flex; align-items: center; justify-content: center; height: 100vh; font-family: sans-serif;}
ul { padding: 0; margin: 0; display: flex;}
ul li { list-style-type: none; width: 120px; height: 120px; margin: 0 20px; border:2px solid #0a3d62; border-radius: 50%; transition: all 0.5s; position: relative; display: flex; align-items: center; justify-content: center;}
ul li i { font-size: 48px; color: #0a3d62; transition: 0.5s;}
ul li:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0a3d62; border-radius: 50%; transition: all 0.5s; opacity: 0; z-index: -1;}
ul li:hover:before { opacity: 1; transform: scale(0.8);}
ul li:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; border-radius: 50%; border:2px dashed #2e86de; transition: all 0.5s; opacity: 0; z-index: -1; box-sizing: border-box;}
ul li:hover:after { opacity: 1; animation: rotating 10s linear infinite;}
@keyframes rotating { 0% { transform:scale(0.92) rotate(0deg); } 100% { transform:scale(0.92) rotate(360deg); }}
ul li:hover i { color: white;}
1.2. image-hover
1.2.1. image-hover1
- 파일
- HTML
- CSS
<div class="container">body {
<div class="container"> <img src="image.png"> <div class="caption"> <h1>amazing caption!</h1> <p>you can write anything here!</p> </div> </div>
body { height: 100vh; display: flex; justify-content: center; align-items: center; font-family: 'Lato', sans-serif;}
.container { width: 500px; height: 500px; position: relative; overflow: hidden;}
.container img { width: 100%; transition: all 0.5s;}
.caption { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; transition: 0.5s; opacity: 0; background-color: rgba(0, 0, 0, 0);}
.caption h1 { text-transform: uppercase; margin: 0;}
.caption p { font-size: 18px; text-transform: capitalize;}
.container:hover .caption { opacity: 1; background-color: rgba(0, 0, 0, 0.5);}
.container:hover img { transform: scale(1.3) rotate(15deg);}
1.2.2. image-hover2
- 파일
- HTML
- CSS
<div>body {
<div> <img src="girl.jpg"> </div>
body { height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #4b4b4b;}
div { width: 300px; height: 400px; border: 5px solid white; overflow: hidden;}
img { width: 100%; height: 100%; transition: transform 1s;}
img:hover { transform: scale(1.2) rotate(9deg);}
