【CSS特效】按钮

按钮特效按照交互场景来分,应该有hover场景,和click点击场景。

特效是为了给予用户正确的反馈,提升交互体验。通过色彩、大小、位置的变化实现。

特效,一般通过 ①改变背景色确认操作、②改变文本颜色,形成视觉色差变化,使用户感受到明亮等;③改变按钮尺寸、文本字体大小形成视觉冲击;④ 增加阴影,发光效果;⑤抖动、旋转等动画特性;

hover特效:

1.改变透明度

.btn {
  &:hover {
    opacity: 0.8;
  }
}

2.改变文本颜色

 

上一篇:(11)2020-12-15(过渡,2D转换(缩放、位移、旋转、倾斜)


下一篇:css实现内容渐进移动效果