本文来自「心谭博客」的《动画设计·按钮特效》,更多文章放在了Github
欢迎交流和Star
特效一览
滑箱:
果冻:
脉冲:
闪光:
气泡:
滑箱特效
效果图
原理
因为 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;
}
button:hover::before {
transform-origin: center top;
transform: scaleY(1);
}