过度动画

要在网页中实现动画效果他必须有三要数；

1；元素的属性值要有变化；

2；要告诉系统那个元素的那个属性要变化；transition-property: widht,height,background-color;

3；要告诉系统这个变化过程要持续多长时间；transition-duration: 2s,2s,2s;

注意过度动画的4种属性

1；/*告诉系统那些属性要执行动画*/

                transition-property:widht,height,background-color;

2；/*告诉系统执行动画的时长*/

                  transition-duration:2s,2s,2s;

3；/*延时多少时间才开始执行动画*/

                   transition-delay:2s;

4；/*动画在执行动画过程的速度*/

                  transition-timing-function:ease;

下面是一个手风琴效果

---

           *{

margin:0;

            padding:0;}

/*注意这里一定要清空默认的边距，不然左边有一个空隙，把盒子撑开了*/

        ul{

          width:1000px;

            height:500px;

            border:1px solid #000;

            margin:100px auto;   //这一句是让元素ul居中显示

            list-style:none;        //这一句是去掉li前面的小远点

        }

ul li{

           width:200px;

            height:500px;

            border:1px solid #bb07ff;

            box-sizing:border-box;  //设置边框不占元素位置

            float:left;     //因为li是块级元素；用浮动让他水平显示

            transition:width 0.2s;     // 设置动画效果

        }

ul li:nth-child(1){

background-color:#27e059;

            }

ul li:nth-child(2){

background-color:#ff4470;

        }

ul li:nth-child(3){

background-color:#0066b8;

        }

ul li:nth-child(4){

background-color:#ff7ad8;

        }

ul li:nth-child(5){

background-color:#efff24;

        }

        ul:hover li{             /*这个是当鼠标到ul 上的时候所有的列都缩小*/

width:100px;}

/*当鼠标到具体的列上的时候。这个列变大*/

        ul li:hover{

width:600px;}