寒假第四周周报--动画 过渡 flex布局 媒体查询

动画：

定义动画：

    keyframes:

        @keyframes 动画名称 {

            0%{     //开始

                width: 100px;   //样式

            }

            100%{   //结束

                width: 200px;   //样式

            }

        }

调用动画:

    动画名称：

            animation-name: move;

    持续时间:

            animation-duration: 2s;

    from和to等价于0%和100%

动画序列：

        可以做多个状态的变化 keyframe 关键帧

        里面的百分比要是整数

        里面的百分比就是 总的时间（我们这个案例10s）的划分 25% * 10 = 2.5s

动画属性：

    <style>

        @keyframes move {

            0% {

                transform: translate(0, 0);

            }

            100% {

                transform: translate(1000px, 0);

            }

        }

        div{

            width: 100px;

            height: 100px;

            background-color: pink;

            /* animation-name: move; */

            /* animation-duration: 2s; */

            /* 运动曲线 */

            /* animation-timing-function: ease; */

            /* 何时开始 */

            /* animation-delay: 1s; */

            /* 重复次数 iteration重复 count次数 infinite无限 */

            /* animation-iteration-count: infinite; */

            /* 是否反方向播放  默认normal 如果想要反方向就用alternate */

            /* animation-direction: alternate; */

            /* 动画结束后的状态 默认为backwards 回到起始状态 我们可以让他停留在结束状态 forwards */

            /* animation-fill-mode: forwards; */

            /* animation: name duration timing-function delay iteration-count direction fill-mode; */

            /* animation: move 2s linear 0s 1 alternate forwards; */

            /* 前面两个属性name和duration一定要写 */

            /* animation: move 2s linear alternate forwards; */

            /* 简写不包括animation-play-state 它要单独写 */

        }

        div:hover{

            /* 鼠标经过div 让这个div停止动画 鼠标离开div 就继续动画  */

            animation-play-state: paused;

        }

    </style>

属性选择器：

        .city div[class^="pulse"]{       //选中class名都含有pulse的

        }

animation-timing-function属性值：

        steps()         //步长 steps就是分几步来完成我们的动画 有了steps就不要写ease或者linear了

        linear          //匀速

        ease            //逐渐慢下来

        ease-in         //加速

        ease-out        //减速

        ease-in-out     //先加速后减速

white-space: nowrap;    //让我们的文字强制一行内显示

过渡：

    transition: 要过度的属性 花费时间 运动曲线 何时开始;            //谁做过渡给谁加

    transition: width 0.5s 1s, height 0.5s 1s;      //如果要写多个属性 利用逗号进行分割

    transition: all 0.5s;        //如果想让多个属性都变化 属性写all就可以了

flex布局：

    flex布局原理：通过给父盒子添加flex属性来控制子盒子的位置和排列方式

    flex布局父项常见属性：

        默认的主轴是x轴 行 row 那么y轴就是侧轴      //flex-direction: row;

        我们的元素是跟着主轴来排列的

        简单了解翻转        //flex-direction: row-reverse;

        我们可以把主轴设置为y轴 那么侧轴就成了x轴       //flex-direction: column;

        justify-content设置主轴上子元素的排列方式

        justify-content属性值：

            justify-content: space-around;          //平分剩余空间

            justify-content: flex-start;            //子元素从头开始排列 贴着主轴的头

            justify-content: flex-end;            //子元素从尾开始排列 贴着主轴的尾

            justify-content: space-between;         //先两边贴边 再平分剩余空间

            justify-content: center;            //在主轴居中对齐 主轴为x轴则水平居中 主轴为y轴则垂直居中

        flex布局中 默认的子元素是不换行的 如果装不下 会缩小子元素的宽度 放到父元素里面

        flex-wrap属性值：

            flex-wrap: nowrap;       //默认值 不换行

            flex-wrap: wrap;        //换行

        align-items(单行)属性值:

            align-items: stretch;       //沿侧轴拉伸 子元素不能给高度

            align-items: flex-start;    //从侧轴头

            align-items: flex-end;    //从侧轴尾

            align-items: center;        //在侧轴居中对齐

        align-content(多行)属性值：比align-items多个space-between和space-around 也都是用来设置侧轴上子元素排列方式的

        flex-flow复合flex-direction和flex-wrap

    flex布局子项常见属性：

        flex        //份数 分配剩余空间

        align-self      //控制子项自己在侧轴上的排列方式

        order       //定义项目的排列顺序 数值越小排列越靠前 默认为零 可取负数 -1比0小 与z-index不同

rem：

    em是相对于父元素的字体大小来说的

    rem是相对于根元素即html元素的字体大小来说的

    rem的优点是可以通过修改html里面的文字大小来改变页面中的元素大小以实现整体控制

    媒体查询：

        语法规范：

                @media 媒体类型 关键字 媒体特性{

           

        }

        功能：媒体查询可以根据不同的屏幕尺寸改变不同的样式

        媒体查询我们一般按照从大到小或者从小到大的顺序来

        媒体查询最好从小到大

        screen和and必须带上不能省略

        数字后必须跟单位 单位不能省略 如970px不能省略px

        引入资源就是针对于不同的屏幕尺寸调用不同的css文件

        引入资源：

                ```

                <link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

                ```