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

发表于 分类于 ， 本文字数： 258 阅读时长 ≈ 1 分钟

代码示例

学习内容

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

1
2
3
.btn {
  transition: all 1s;
}

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

1
2
3
4
.btn::before {
  transform: skewX(45deg);
  transition: all 0.5s;
}
--------------本文结束 感谢您的阅读--------------