2021-02-27

按钮的过渡效果

首先，我们先看一下初始样式：

然后最终变化完的效果就是这个样子：

现在我们来看一下HTML的布局：

就是一个a标签包裹着一个span标签，span标签里面放的就是按钮中间显示的字母，这里之所以要放一个a标签就是因为这是一个“按钮”，按钮肯定会有点击，所以我们就要用到a标签，然它在点击时有一个页面跳转

现在讲一下这次小案例的知识点：

transform: scaleY(0.0) rotateX(0deg);
scaleY（）元素仅垂直方向缩
rotateX（）用于设置旋转的角度，如果为正，元素相对原点中心顺时针旋转；如果为负，逆时针旋转[在这里可以不设置，影响不大]

接着我们看全局通用的样式：

将外边距设为0px，内边距也设为0px；这样就方便我们后面写样式。

接着我们看a标签的样式：

先是给了一个外边距：上为50px 右为0px 下为0px 左为250px，接着是一个相对定位，然后将a标签变成行内块级标签，宽为200px，高为50px，背景颜色为#ff4880（粉色），行高为50px，文本水平居中，字体加粗，每个单词的首字母大写，圆角为10px，将光标变成手的样式，字体颜色为white（白色），去下划线

然后就是给a标签添加了一个伪元素“：：after”，在a标签的末尾添加元素，样式如下：

给一个绝对定位，然后上为0px，右为0px 下为0px 左为0px，背景颜色为#8fc424（绿色），
transform：scaleY（）元素仅垂直方向缩 rotateX（）用于设置旋转的角度，如果为正，元素相对原点中心顺时针旋转；如果为负，逆时针旋转[在这里可以不设置，影响不大]
Transition：选择全部的元素）表示的是所有初始状态设置了样式的属性 transition-duration （过渡时间）该属性主要用于设置一个属性过渡到另一个属性所需的时间，即持续时间 transition-timing-function（过渡过程的样式） 即“缓冲函数”，指过渡效果的时间曲线；

现在我们看看span的样式：

给了一个相对定位，层级/属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

现在就是写鼠标移入a标签时span标签的样式：

字体颜色:#393d72（紫色）

接着就是鼠标移入时“：：after”的样式，也就是整个按钮过渡时的样式：

scaleY（）元素仅垂直方向缩放 rotateX（）用于设置旋转的角度，如果为正，元素相对原点中心顺时针旋转；如果为负，逆时针旋转[在这里可以不设置，影响不大]

总结：

一开始这个按钮的初始样式是背景颜色为粉色，当鼠标移入时背景颜色变成绿色，是从按钮的垂直居中的位置开始过渡到完全覆盖粉色背景。