css04-按钮特效动画（遮罩、过渡）

文章时效性提示

这是一篇发布于 639 天前的文章，部分信息可能已发生改变，请注意甄别。

代码示例

学习内容

1、设置好 btn 元素本身的 transition 更具有过渡效果。

.btn {
  transition: all 1s;
}

2、效果主要依赖 transition 和 transform 实现。斜角过渡效果，是对 ::before 的 hover 效果，经过 transform 倾斜角度。

.btn::before {
  transform: skewX(45deg);
  transition: all 0.5s;
}