之前使用样式变化太生硬所以现在选择使用过渡效果来实现

    transition:从一种效果到另一种效果

    前提：必须有一个事件来触发

    当过渡属性添加在hover上的时候只有hover上的时候才有过渡效果

    当过渡属性添加在元素本身上的时候则不管是hover还是出去的时候都有过渡效果

    当元素本身和hover上去的时候都有过渡效果时，则hover上去时是hover里面的transition产生的效果，出去的时候是元素本身上的transition产生的效果

    要想产生过渡效果，必须有至少两个属性值：一个是过渡的属性，一个是过渡的时间
    transition-property
    transition-duration表示过渡要持续的时间
    transition-timing-function表示过渡效果的时间曲线
    ease先快后慢
    linear恒速
    ease-in: 速度越来越快
    ease-out: 越来越慢
    ease-in-out: 先慢再快再慢
    transition-delay表示过渡效果延迟多久开始
    transition：property duration timing-function delay;