transition,transform小应用，按钮hover效果背景过渡变换

分手后的思念是犯贱 2023-06-16 15:55 22阅读 0赞

## 1. 引子 ##

昨天在某招聘网站上看到一个按钮的背景过渡效果，本着学习的态度去琢磨了下transition的用法，下面是测试写的效果,当鼠标放在按钮上的时候,蓝色背景斜着从左边过去。大家第一时间有没有想到是怎么实现的哇？  
![在这里插入图片描述][20191127102141639.png]

## 2. transition、transform的配合使用 ##

大家有没有想到呢？我给大家揭晓。  
先给大家说说思路，按钮本身背景是透明的，按钮的背后有一层(这里可以用after或者before伪类)，背后的一层使用transform倾斜角度，用transition过渡宽度变化，初始化的时候背后的一层宽度为0,当hover的时候宽度变宽。不多说，看代码  
html代码：

css代码(scss)：

.ytf_btn{
      position: relative;
      width: 70px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #323232;
      border: 1px solid #333333;
      cursor: pointer;
      -webkit-transition: all .5s cubic-bezier(0.2, 0.0, 0.2, 1);
      transition: all .5s cubic-bezier(0.2, 0.0, 0.2, 1);
      overflow: hidden;
      font-weight: 600;
      background: transparent;
      &::after{
        content: "";
        position: absolute;
        left: -3px;
        top: -6px;
        width: 0%;
        height: 140%;
        transform: rotate(8deg);
        background-color: rgb(33, 4, 112);
        z-index: -1;
        transition: 1s background cubic-bezier(0.2, 0.0, 0.2, 1), 1s width cubic-bezier(0.2, 0.0, 0.2, 1);
      }
      &:hover{
        color: #fff;
        z-index: 0;
        &::after{
          width: 120%;
        }
      }
    }

## 3. 总结 ##

**个人理解**  
transition的意思是转变，我习惯把它说成过渡，它是css中动画最简单的一种。当一个元素的状态变化，页面一般是默认瞬间变化的，会给用户一种强烈的视觉冲击，加上transition过渡效果，会达到一种循序渐进的效果，交互和视觉体验会让用户更加容易接受。

**基础知识**  
理解这种transition的关键点：  
(1) 这些动画是暗含的。你的JavaScript脚本和CSS都像往常一样编写。动画只会简单的发生在属性值发生变化的时候。  
(2) 不支持这些transition属性的浏览器不会有任何动画发生。你的JavaScript和css不会对正常的显示带来任何负面影响。  
下面是transition属性的分解介绍。所有的这些属性都可以跟多个属性值，用逗号分隔。  
transition-property  
允许值: none | all | <属性名>  
初始值: all  
描述: 指明什么属性将触发动画效果。none 值表示没有变化。 all 值表示所有可以动画演示的属性都可以触发动画效果。否则，只有指定的属性值方式变化才能触发动画效果。  
transition-duration  
允许值: <时间>  
初始值: 0  
描述: 指明动画持续的时间长度。  
transition-timing-function  
允许值: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)  
初始值: ease  
描述: 这个 transition-timing-function 属性描述了动画随着时间运动的速度-时间函数。可以使用几种常见的调速函数，也可以使用立方贝塞尔(cubic bezier)函数加控制点来自定义动画的变换速度方式。对于立方贝塞尔曲线方程，我们需要两个点的（X,Y）来控制曲线。点 P0 固定是 (0,0) 而 P3 固定是 (1,1)。有了这个四个点就能计算出一条立方贝塞尔曲线。  
这些调速函数的意思是这样的：  
linear – 线性函数，返回值一个输入值一样的结果。  
ease – 减缓函数, 是缺省值, 等同于 cubic-bezier(0.25, 0.1, 0.25, 1.0).  
ease-in – 等同于 cubic-bezier(0.42, 0, 1.0, 1.0).  
ease-out – 等同于 cubic-bezier(0, 0, 0.58, 1.0).  
ease-in-out – 等同于 cubic-bezier(0.42, 0, 0.58, 1.0)

> bezier cubic-bezier – P0 和 P3 两个点分别是 (0,0) 和 (1,1) 。再加上另外两个点 (x1, y1,  
> x2, y2) 就定义了一个立方贝塞尔曲线

下面这篇文章有详细的介绍使用  
[css3中的变形（transform）、过渡(transtion)、动画(animation)详细介绍][css3_transform_transtion_animation]

[20191127102141639.png]: https://img-blog.csdnimg.cn/20191127102141639.png
[css3_transform_transtion_animation]: https://www.cnblogs.com/qianduanjingying/p/4937574.html