[CSS动效][按钮篇] 适用于 FlatUI 的扁平化按钮
CSS动效学习与巧妙应用
因现在的前端愈发卷，玩出一手花动效，在不影响交互的前提下提供更有趣的交互动画势必可以让你的页面充满活力。
本专栏将从页面常用基本组件入手，提供 原生Vue组件 实现
案例效果
具体实现
按钮雏形
第一步，绘制按钮
- 为按钮定义宽度高度，加上padding避免填充其他内容的时候直接靠边，比较丑。
- 为按钮添加居中效果 当line-height与整体height相同时，文字将垂直居中 设置 text-align: center 进行水平居中
- 为按钮添加鼠标手势 即使用 cursor: pointer 让鼠标移动到上面的时候显示为 可点击 的手势
- 禁止按钮文本被选中 避免出现一直点的时候选中文本
- 为适应 FlatUI 加入圆角 相关代码如下：
// HTML
你好，CSS动效// CSS
.FlatBtn-Container {padding: 4px;width: 150px;height: 70px;line-height: 70px;text-align: center;cursor: pointer;user-select: none;border-radius: 8px;background: #262626;
}
镂空按钮 这种默认无背景色的设计能较好观察页面底色，底层，为 FlatUI 中的 plain 风格，比较适合CMS系统等的使用，也可作为次重要按钮使用，悬浮的时候再给出底色，能形成聚焦效果，较好引导用户视线。
第二步，点击效果
通过案例，可以发现，当按钮被点击时将出现缩小并且伴随着透明度变化
- 透明度变化通过 opacity 实现 相关代码如下：
// CSS
.FlatBtn-Container:active {opacity: .75;transform: scale(.85);
}
但此时，发现按钮闪烁很厉害，所以需要用到 transition 属性进行元素过渡 为元素添加 transition 属性并设置过渡时间
.FlatBtn-Container {transition: all .25s; // all 可以省略
}
第三步，伪类大法
观察案例可以得知，当鼠标移动上去的时候伴随着文字颜色变化以及有一个背景颜色放大，这是通过伪类实现的。
让我们先做相对容易的 hover 效果
.FlatBtn-Container:hover {color: #0876fa;filter: invert(5%);
}
特别强调 伪类对齐需要父元素设置 position: relative; 这里加入 filter 之后也可以让伪类对齐，实现相同的效果，如果去掉则会发现伪类占据了整个页面。
注意，这里的 filter 属性代表给元素加上滤镜，这里加入了 invert 颜色反转滤镜，让我们hover的时候背景颜色稍微变化，通过filter可以实现主题色的明暗，对比等变化。
这里如此设计，当鼠标移动上去的时候，可以实现一个 聚焦 的效果
要想动效爽，伪类大法不可少
思考，如何实现新的颜色层覆盖。 可能你会想新建元素，不过合理使用 CSS3 中的特性能省去我们不少麻烦，精简 dom 结构
&:before {z-index: -1;content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;background: #0f0f0f; border-radius: 8px;transition: .15s;
}
解释一下
1.通过 z-index: -1 将伪类放到元素的最下面，防止伪类遮住文字
2.通过 content、position、left、top、width、height 属性让伪类与父元素重合，大小一致
3.通过 opacity 设置透明度为 0 让元素默认不可见
4.通过 transition 让伪类具有过渡动画
是不是非常简单，默认情况下我们让伪类缩小看不见，当hover的时候再让他透明度变为 1，因为前面通过了 filter 加上了一个颜色反转，那么对用户来说其实就相当于背景颜色渐渐变化的同时，新的颜色又覆盖上来，形成聚焦效果，点击时又弹性十足，吸引用户的点击，增加网站的趣味性。
注意，需要 hover 的时候让 opacity: 1 让元素透明度变为 1 即可。
伪类的巧妙 border 实现
既然伪类可以覆盖掉整个元素，那么我们也可以让伪类稍微放大一点，做成虚假的border，然后加入 box-shadow 丰富我们的border 就实现了 轻镂空 效果的 FlatUI 按钮。
除此之外，让伪类默认变小，点击的时候再慢慢放大 box-shadow 渐渐闪出来。
需要注意的是，这里使用了 calc 计算(calculate的简写) ，算出伪类的大小是 父元素 100% 加上 9px 为什么是 9px呢， 因为我们 left, top 偏移了 6px 即向左向上 各 6px 这个时候相较于原来位置其实是一半 3px 所以右下角也得各增加 3px 才能实现相同的大小 即 6px + 3px = 9px 。
&:after {z-index: 0;content: "";position: absolute;left: -6px;top: -6px;width: calc(100% + 9px);height: calc(100% + 9px);opacity: 0;border: 2px solid #262626;box-shadow: 0 0 4px 2px #262626;border-radius: 8px;transform: scale(.85);transition: .15s;}
整体代码 (Scss)
你好，CSS动效。
总结与反思
总结
本章通过一个简单的小案例简单分析了具体实现效果，讲述了 :active, :before, :hover 选择器的简单使用。 除此之外，通过 calc 计算属性的高度与宽度，实现了 轻镂空 的 FlatUI 按钮。 注意合理的使用各项属性与了解 transition 动画，并且这些动效其实都有套路的，后续将会进一步讲解。 欢迎关注本栏，持续了解更多动效写法。
反思
本章通过 div 进行实现按钮，实际情况建议引入 normalize.css 等重置初始样式库，利用 button 标签进行实现，或 role 等，避免因 全页div 造成语义不详，SEO不友好等，后续将进一步讲解。
结语
谢谢阅读，通过关注我、关注本栏 可以了解更多关于CSS动效等方面的有趣知识，涉及到开发的基本组件方方面面，全程代码开源。
您可以对专栏章节进行评价，反馈需要 文字解释叙述更多一点 或者是 相关写法（即类似的案例）更多一点 还是 技巧使用 更多一点 亦或 基础讲解以及动画讲解 更多一点。
最后，整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
有需要的小伙伴，可以点击下方卡片领取，无偿分享
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！