2 hover효과
2.마우스 오버 효과
1.1. button-hover
1.1.1. mouse-hover1
- HTML
- CSS
1<a href="#"><span></span>hover me</a>1body {2 margin: 0;3 display: flex;4 align-items: center;5 justify-content: center;6 height: 100vh;7 font-family: verdana;8 background-color: #272727;9}10
11a {12 width: 220px;13 height: 80px;14 color: #ff0;15 background-color: transparent;16 font-size: 26px;17 text-decoration: none;18 text-transform: uppercase;19 text-align: center;20 line-height: 80px;21 transition: all 0.5s;22 position: relative;23}24
25a:before,26a:after {27 content: '';28 position: absolute;29 top: 50%;30 width: 20px;31 height: 20px;32 background-color: #ff0;33 border-radius: 50%;34 transform: translateY(-50%);35 transition: all 0.3s;36 z-index: -1;37 opacity: 0;38}39
40a:before {41 left: 0;42 box-shadow: -100px 0 0 #ff0;43}44
45a:after {46 right: 0;47 box-shadow: 100px 0 0 #ff0;48}49
50a:hover:before {51 left: 50%;52 box-shadow: 30px 0 0 #ff0;53 transform: translateX(-50%) translateY(-50%);54 opacity: 1;55}56
57a:hover:after {58 right: 50%;59 box-shadow: -30px 0 0 #ff0;60 transform: translateX(50%) translateY(-50%);61 opacity: 1;62}63
64span {65 position: absolute;66 top: 0;67 left: 0;68 width: 100%;69 height: 100%;70 background-color: #ff0;71 border-radius: 8px;72 transform: scale(0);73 transition: all 0.3s;74 z-index: -1;75}76
77a:hover span {78 transform: scale(1);79 transition-delay: 0.4s;80}81
82a:hover {83 color: #262626;84 transition-delay: 0.4s;85}1.1.2. mouse-hover2
- HTML
- CSS
1<ul>2 <li>3 <a href="#">4 home5 <span></span>6 <span></span>7 <span></span>8 <span></span>9 </a>10 </li>11
12 <li>13 <a href="#">14 about15 <span></span>16 <span></span>17 <span></span>18 <span></span>19 </a>20 </li>21
22 <li>23 <a href="#">24 services25 <span></span>26 <span></span>27 <span></span>28 <span></span>29 </a>30 </li>31
32 <li>33 <a href="#">34 team35 <span></span>36 <span></span>37 <span></span>38 <span></span>39 </a>40 </li>41
42 <li>43 <a href="#">44 contact45 <span></span>46 <span></span>47 <span></span>48 <span></span>49 </a>50 </li>51</ul>1body {2 margin: 0;3 display: flex;4 align-items: center;5 justify-content: center;6 height: 100vh;7 font-family: sans-serif;8}9
10ul {11 margin: 0;12 padding: 0;13 display: flex;14 list-style-type: none;15}16
17ul li a {18 display: block;19 width: 120px;20 height: 40px;21 line-height: 40px;22 text-align: center;23 color: red;24 text-transform: capitalize;25 text-decoration: none;26 position: relative;27 transition: all 0.5s;28 color: #262626;29}30
31a:hover {32 color: white;33}34
35ul li span {36 position: absolute;37 width: 100%;38 height: 25%;39 background-color: #262626;40 z-index: -1;41 left: 0;42 top: 0;43 transform: scaleX(0);44 transition: all 0.5s;45 transform-origin: left;46}47
48a:hover span {49 transform: scaleX(1);50}51
52span:nth-child(2) {53 top: 25%;54 transition-delay: 0.15s;55}56
57span:nth-child(3) {58 top: 50%;59 transition-delay: 0.3s;60}61
62span:nth-child(4) {63 top: 75%;64 transition-delay: 0.45s;65}1.1.3. mouse-hover3
- HTML
- CSS
1<button class="btn">button</button>1body {2 margin: 0;3 display: flex;4 align-items: center;5 justify-content: center;6 height: 100vh;7 font-family: sans-serif;8}9
10.btn {11 border: 2px solid tomato;12 background: none;13 color: tomato;14 padding: 20px 40px;15 font-size: 25px;16 text-transform: uppercase;17 cursor: pointer;18 transition: all 0.5s;19 position: relative;20 color: tomato;21 overflow: hidden;22}23
24.btn:hover {25 color: white;26}27
28.btn:before {29 content: '';30 position: absolute;31 bottom: 0;32 left: 0;33 width: 100%;34 height: 100%;35 background: tomato;36 z-index: -1;37 border-radius: 50% 50% 0% 0%;38 height: 0%;39 transition: all 0.5s;40}41
42.btn:hover:before {43 height: 190%;44}1.1.4. mouse-hover4
- HTML
- CSS
1<!DOCTYPE html>2<html lang="ko">3
4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1">7 <title>CSS animatin, transitions and transforms</title>8
9 <!-- OUR STYLESHEET -->10 <link rel="stylesheet" href="style.css" type="text/css" media="all">11
12 <!-- FONT ِAWESOME -->13 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">14
15
16</head>17
18<body>19
20 <ul>21 <li><i class="fas fa-heart"></i></li>22 <li><i class="fas fa-glass-martini"></i></li>23 <li><i class="fas fa-globe"></i></li>24 <li><i class="fas fa-gift"></i></li>25 </ul>26
27</body>28</html>1body {2 margin: 0;3 display: flex;4 align-items: center;5 justify-content: center;6 height: 100vh;7 font-family: sans-serif;8}9
10ul {11 padding: 0;12 margin: 0;13 display: flex;14}15
16ul li {17 list-style-type: none;18 width: 120px;19 height: 120px;20 margin: 0 20px;21 border:2px solid #0a3d62;22 border-radius: 50%;23 transition: all 0.5s;24 position: relative;25 display: flex;26 align-items: center;27 justify-content: center;28}29
30ul li i {31 font-size: 48px;32 color: #0a3d62;33 transition: 0.5s;34}35
36ul li:before {37 content: '';38 position: absolute;39 top: 0;40 left: 0;41 width: 100%;42 height: 100%;43 background-color: #0a3d62;44 border-radius: 50%;45 transition: all 0.5s;46 opacity: 0;47 z-index: -1;48}49
50ul li:hover:before {51 opacity: 1;52 transform: scale(0.8);53}54
55ul li:after {56 content: '';57 position: absolute;58 top: 0;59 left: 0;60 width: 100%;61 height: 100%;62 background-color: transparent;63 border-radius: 50%;64 border:2px dashed #2e86de;65 transition: all 0.5s;66 opacity: 0;67 z-index: -1;68 box-sizing: border-box;69}70
71ul li:hover:after {72 opacity: 1;73 animation: rotating 10s linear infinite;74}75
76@keyframes rotating {77 0% { transform:scale(0.92) rotate(0deg); }78 100% { transform:scale(0.92) rotate(360deg); }79}80
81ul li:hover i {82 color: white;83}1.2. image-hover
1.2.1. image-hover1
- 파일
- HTML
- CSS
1 <div class="container">2 <img src="image.png">3 <div class="caption">4 <h1>amazing caption!</h1>5 <p>you can write anything here!</p>6 </div>7 </div>1body {2 height: 100vh;3 display: flex;4 justify-content: center;5 align-items: center;6 font-family: 'Lato', sans-serif;7}8
9.container {10 width: 500px;11 height: 500px;12 position: relative;13 overflow: hidden;14}15
16.container img {17 width: 100%;18 transition: all 0.5s;19}20
21.caption {22 position: absolute;23 top: 0;24 left: 0;25 height: 100%;26 width: 100%;27 display: flex;28 flex-direction: column;29 justify-content: center;30 align-items: center;31 color: white;32 transition: 0.5s;33 opacity: 0;34 background-color: rgba(0, 0, 0, 0);35}36
37.caption h1 {38 text-transform: uppercase;39 margin: 0;40}41
42.caption p {43 font-size: 18px;44 text-transform: capitalize;45}46
47.container:hover .caption {48 opacity: 1;49 background-color: rgba(0, 0, 0, 0.5);50}51
52.container:hover img {53 transform: scale(1.3) rotate(15deg);54}1.2.2. image-hover2
- 파일
- HTML
- CSS
1 <div>2 <img src="girl.jpg">3 </div>1body {2 height: 100vh;3 display: flex;4 justify-content: center;5 align-items: center;6 background-color: #4b4b4b;7}8
9div {10 width: 300px;11 height: 400px;12 border: 5px solid white;13 overflow: hidden;14}15
16img {17 width: 100%;18 height: 100%;19 transition: transform 1s;20}21
22img:hover {23 transform: scale(1.2) rotate(9deg);24}