CSS动效学习与巧妙应用

因现在的前端愈发卷，玩出一手花动效，在不影响交互的前提下提供更有趣的交互动画势必可以让你的页面充满活力。

本专栏将从页面常用基本组件入手，提供 原生Vue组件 实现

案例效果

具体实现

按钮雏形

第一步，绘制按钮

• 为按钮定义宽度高度，加上padding避免填充其他内容的时候直接靠边，比较丑。
• 为按钮添加居中效果 当line-height与整体height相同时，文字将垂直居中 设置 text-align: center 进行水平居中
• 为按钮添加鼠标手势 即使用 cursor: pointer 让鼠标移动到上面的时候显示为 可点击 的手势
• 禁止按钮文本被选中 避免出现一直点的时候选中文本 相关代码如下：

// HTML
<div class='MaterialBtn-Container'>你好，CSS动效</div>

// CSS
.MaterialBtn-Container {
  padding: 4px;

  width: 150px;
  height: 70px;

  line-height: 70px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  background: #262626;
}  

第二步，点击效果

通过案例，可以发现，当按钮被点击时将出现缩小并且伴随着透明度变化

• 缩小通过 transform 中的 scale 实现
• 透明度变化通过 opacity 实现 相关代码如下：

// CSS
.MaterialBtn-Container:active {
    opacity: .75;
    transform: scale(.85);
} 

但此时，发现按钮闪烁很厉害，所以需要用到 transition 属性进行元素过渡 为元素添加 transition 属性并设置过渡时间

.MaterialBtn-Container {
    transition: all .25s; // all 可以省略
}

第三步，伪类大法

观察案例可以得知，当鼠标移动上去的时候伴随着文字颜色变化以及有一个背景颜色放大，这是通过伪类实现的。

让我们先做相对容易的 hover 效果

.MaterialBtn-Container:hover {
    color: #0876fa;
    filter: invert(5%);
}

注意，这里的 filter 属性代表给元素加上滤镜，这里加入了 invert 颜色反转滤镜，让我们hover的时候背景颜色稍微变化，通过filter可以实现主题色的明暗，对比等变化。

要想动效爽，伪类大法不可少

思考，如何实现新的颜色层覆盖。 可能你会想新建元素，不过合理使用 CSS3 中的特性能省去我们不少麻烦，精简 dom 结构

&:before {
    z-index: -1;
    content: "";
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background: #0f0f0f; 
    transform: scale(0);
    transition: .25s;
}

解释一下

1. 通过 z-index: -1 将伪类放到元素的最下面，防止伪类遮住文字
2. 通过 content、position、left、top、width、height 属性让伪类与父元素重合，大小一致
3. 通过 transform 让伪类缩小为 0 ，避免默认情况下伪类可见
4. 通过 transition 让伪类具有过渡动画

是不是非常简单，默认情况下我们让伪类缩小为 0，当hover的时候再让他放大变成全局，因为前面通过了 filter 加上了一个颜色反转，那么对用户来说其实就相当于背景颜色渐渐变化的同时，新的颜色又覆盖上来，在营造扁平中的空间变化感的同时，又弹性十足，吸引用户的点击，增加网站的趣味性。

注意，需要 hover 的时候让 transform: scale(1) 让元素再放大到原本大小即可。

整体代码 (Scss)

<template>
  <div class="MaterialBtn-Container">
    你好，CSS动效。
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: "MaterialBtn"
})
</script>

<style lang='scss'>
.MaterialBtn-Container {
  &:active {
    opacity: .75;
    transform: scale(.85);
  }
  &:hover {
    &:before {
      transform: scale(1);
    }
    color: #0876fa;
    filter: invert(5%);
  }
  &:before {
    z-index: -1;
    content: "";
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background: #0f0f0f; 
    transform: scale(0);
    transition: .25s;
  }
  padding: 4px;

  width: 150px;
  height: 70px;

  line-height: 70px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  background: #262626;
  transition: .25s;
}  

</style>
      

总结与反思

总结

本章通过一个简单的小案例简单分析了具体实现效果，讲述了 :active, :before, :hover 选择器的简单使用。 注意合理的使用各项属性与了解 transition 动画，并且这些动效其实都有套路的，后续将会进一步讲解。 欢迎关注本栏，持续了解更多动效写法。

反思

本章通过 div 进行实现按钮，实际情况建议引入 normalize.css 等重置初始样式库，利用 button 标签进行实现，或 role 等，避免因 全页div 造成语义不详，SEO不友好等，后续将进一步讲解。

结语

谢谢阅读，通过关注我、关注本栏 可以了解更多关于CSS动效等方面的有趣知识，涉及到开发的基本组件方方面面，全程代码开源。

您可以对专栏章节进行评价，反馈需要 文字解释叙述更多一点 或者是 相关写法（即类似的案例）更多一点 还是 技巧使用 更多一点 亦或 基础讲解以及动画讲解 更多一点。