实现按钮悬停动画

知识点与技巧

• 伪元素

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

• 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);
}

按钮背景动画

切换效果

核心代码

/* 这里使用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);
}

背景圆动画

切换效果

核心代码

.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;
}

底部边线动画

切换效果

核心代码

.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);
}

总结

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

实例代码下载

实例代码下载