# 快速导航

# 鼠标移到边框时效果

# 具体效果实现

# 具体代码实现

点击即可查看 html 代码
<div id="draw-border">
  <button>Hover</button>
</div>
1
2
3
点击即可查看 css 代码
#draw-border {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 15vh;
}

button {
  border: 0;
  background: none;
  text-transform: uppercase;
  color: #4361ee;
  font-weight: bold;
  position: relative;
  outline: none;
  padding: 10px 20px;
  box-sizing: border-box;
}

button::before,
button::after {
  box-sizing: inherit;
  position: absolute;
  content: '';
  border: 2px solid transparent;
  width: 0;
  height: 0;
}

button::after {
  bottom: 0;
  right: 0;
}

button::before {
  top: 0;
  left: 0;
}

button:hover::before,
button:hover::after {
  width: 100%;
  height: 100%;
}

button:hover::before {
  border-top-color: #4361ee;
  border-right-color: #4361ee;
  transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
}

button:hover::after {
  border-bottom-color: #4361ee;
  border-left-color: #4361ee;
  transition: border-color 0s ease-out 0.3s, width 0.3s ease-out 0.3s,
    height 0.3s ease-out 1s;
}
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

# 鼠标经过圆形效果

# 具体实例代码

点击即可查看 html 效果
<div id="circle-btn">
  <div class="btn-container">
    <button>Hover</button>
  </div>
</div>
1
2
3
4
5
点击即可查看 css 代码
#circle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20vh;
}

.btn-container {
  position: relative;
}

button {
  border: 0;
  border-radius: 50px;
  color: white;
  background: #5f55af;
  padding: 15px 40px 16px 40px;
  text-transform: uppercase;
  background: linear-gradient(to right, #f72585 50%, #5f55af 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 2s ease;
}

button:hover {
  background-position: left bottom;
}
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

# 鼠标经过元素抖动效果

# 具体实现

点击即可查看`html`代码
<span class="shake">弹</span>
1
点击即可查看`css`代码
.shake {
  width: 40px;
  height: 40px;
  display: block;
  background: lightgreen;
  border-radius: 50%;
  margin: 5px;
  color: #fff;
  font-size: 24px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  -webkit-transition: all 0.25s;
}

.shake:hover {
  -webkit-animation: shake 0.25s;
  background: lightblue;
}

@keyframes shake {
  0%,
  10%,
  55%,
  90%,
  94%,
  98%,
  100% {
    -webkit-transform: scale(1, 1);
  }

  30% {
    -webkit-transform: scale(1.14, 0.86);
  }

  75% {
    -webkit-transform: scale(0.92, 1.08);
  }

  92% {
    -webkit-transform: scale(1.04, 0.96);
  }

  96% {
    -webkit-transform: scale(1.02, 0.98);
  }

  99% {
    -webkit-transform: scale(1.01, 0.99);
  }
}
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

关注公众号

一个走心,有温度的号,同千万同行一起交流学习

加作者微信

扫二维码 备注 【加群】

扫码易购

福利推荐