实现按钮悬停动画

知识点与技巧

• 伪元素

  使用伪元素来作为按钮悬停效果动画展示的元素

• z-index 的使用技巧

  使用z-index属性来控制按钮和伪元素的层次关系

• transform、transition 复习

  使用transform、transition两个属性来实现动画的展示

按钮边框动画

切换效果

核心代码

.btn.btn-border-pop::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--border-radius);
  border: var(--border-size) solid var(--background-color);
  transition: top, left, right, bottom, 100ms ease-in-out;
}

/* 负数向外移动2倍,这里可以修改top、left、right、bottom属性的值从而达到不同的效果 */
.btn.btn-border-pop:hover:before,
.btn.btn-border-pop:focus::before {
  top: calc(var(--border-size) * -2);
  left: calc(var(--border-size) * -2);
  right: calc(var(--border-size) * -2);
  bottom: calc(var(--border-size) * -2);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

按钮背景动画

切换效果

核心代码

/* 这里使用z-index管理按钮和伪元素的层次关系 */
.btn.btn-background-slide {
  transition: color 300ms ease-in-out;
  z-index: 1;
}

/* 伪元素的z-index设置为-1后，动画执行时就不会遮挡按钮的文字 */
.btn.btn-background-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--border-radius);
  background-color: var(--accent-color);
  transition: transform 300ms ease-in-out;
  transform: scaleX(0);
  transform-origin: left;
}

.btn.btn-background-slide:hover:before,
.btn.btn-background-slide:focus:before {
  transform: scaleX(1);
}
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

背景圆动画

切换效果

核心代码

.btn.btn-background-circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: var(--background-color);
  border-radius: 50%;
  transition: transform 500ms ease-in-out;
  transform: scale(1.5);
}

.btn.btn-background-circle:hover:before,
.btn.btn-background-circle:focus:before {
  transform: scale(0);
}

.btn.btn-background-circle {
  z-index: 1;
  overflow: hidden;
  background-color: var(--accent-color);
  transition: color 500ms ease-in-out;
}
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

底部边线动画

切换效果

核心代码

.btn.btn-background-circle:hover,
.btn.btn-background-circle:focus {
  color: #fff;
}

.btn.btn-background-underline::before {
  content: "";
  position: absolute;
  top: 33px;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--border-size);
  background-color: var(--accent-color);
  transition: transform 300ms ease-in-out;
  transform: scaleX(0);
}

.btn.btn-background-underline:hover:before,
.btn.btn-background-underline:focus:before {
  transform: scaleX(1);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

总结

使用 CSS 实现按钮动画效果的时候，我们可以使用伪元素来作为动画的执行者，然后结合使用z-indx属性来辅助管理我们按钮与动画层的显示关系，最后在结合相关的动画交互属性就可以实现自己的动画切换效果。

实例代码下载

实例代码下载