web前端动画专题（3）：撩人的按钮特效
特效一览 滑箱 ： 果冻 ： 脉冲 ： 闪光 ： 气泡 ： 滑箱特效 效果图 原理 因为 button 元素可以使用 before/after 伪元素，所以借助伪元素，可以实现动态图中的遮盖层。 为了避免回流重绘，滑箱的运动方向是垂直方向，所以使用 scaleY 属性。对于动画的方向，需要借助 transform-origin 改变动画原点。 代码实现 html： <button>xin-tan.com</button> css： button { outline: none; border: none; z-index: 1; position: relative; color: white; background: #40a9ff; padding: 0.5em 1em; } button::before { content: ""; z-index: -1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #fa541c; transform-origin: center bottom; transform: scaleY(0); transition: transform 0.4s ease-in-out; } button:hover { cursor: pointer