给 HTML 元素 Hover 态加点料

Posted 2021-04-04 素燕

UE 小姐姐经常会说：“这个按钮 Hover 的时候背景色要变深，这个图片 Hover 的时候要动一下”，你可以选择「搜地一声」从一种状态变成另一种状态，也可以让这个变化过程中有一种「过渡效果」。

这其中背后使用的基本都是 transition 来实现，在  这节内容中有提到过它，今天系统学一遍。

当修改 CSS 「某些」属性的时候，可以给这些属性添加效果，让其带有动画改变，有一个过渡效果，而不是「搜地一声」就变过去了。transition 这货和 animation 用法基本一致。先回顾一下 animation 的属性，各个属性的作用可以看 ：

再来看 transition，其实就是 mini 版的 animation。

transition 是过渡动画，修改某些属性的时候不会立刻生效，它会以动画的形式逐渐过渡到要设置的值。比如设置某个 html 元素的背景颜色，修改宽度和高度。

.move-transition { /* transition-property: all; */ transition-property: background-color, height, width; transition-duration: 1.8s, 1.0s, 1.0s; transition-delay: 0.1s; transition-timing-function: linear;}

transition-property: 指需要使用过渡动画的属性，这里设置了背景色，高度和宽度。也可以通过关键字 all 设置所有的属性；
transition-duration: 动画持续的时间，可以单独控制某个属性的时间， transition-duration：1.8s, 1.0s, 1.0s 表示修改 background-color 需要 1.8s, 修改 height 需要 1.0s,  修改 width 需要 1.0s;
transition-delay：动画开始时需要延迟多长时间才开始执行；
transition-timing-function：表示动画执行时的时间函数，不同函数走过的曲线不一样，详细内容可参考 。

我们做一个 hover 态时按钮背景变化：

代码如下：

总的来说可以把 transition 看做是「一次性动画」，如果想给某些 HTML 元素属性改变时添加点动效，可以通过它来实现。

大家加油！

---

推荐阅读：