css- 过渡 / 动画 / 浏览器兼容 / 媒体查询

1. 过渡

    1.1 作用

        使元素从一种样式【逐渐】变到另外一种样式。

    1.2 语法

        1）过渡的持续时间  -- 必须属性

            transition-duration:0s;

            默认0s

            单位s  ms

 

        2）过渡的属性  -- 可选属性

            transition-property:all;

            默认all 取值css的属性，多个属性逗号隔开

            可以过渡的属性：

            ① 取值为颜色  color  background-color等

            ② 取值为数值  width、height、margin、padding、top、left等

            ③ 阴影  box-shadow  text-shadow

            ④ 转换  transform

        3）过渡的速度变化类型  -- 可选属性

            transition-timing-function:ease;

            默认值：ease：先加速后减速  

            ease-in：加速  

            ease-out：减速  

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

            linear：匀速

        4）过渡的延迟时间  -- 可选属性

            transition-delay:0s;

            默认0s

            单位s、ms  

            可以取负值：跳过这段时间的效果

    1.3 简写

     transition:all 0s ease 0s;

                持续时间  延迟时间

     一个属性多个属性值，空格隔开，不区分前后顺序  

     当有两个时间同时存在，前面的时间是持续时间，后面的时间是延迟时间

2. 动画

    2.1 作用

        使元素从一种样式【逐渐】变到另外一种样式。

    2.2 动画和过渡的区别

        ① 动画可以控制变化的过程；过渡不可以  动画：红--蓝--紫--黄--绿  过渡：红--绿

        ② 动画可以控制播放的次数；过渡不可以

        ③ 动画可以没有触发事件；过渡必须有触发事件(鼠标悬停)

    2.3 动画的步骤

        1）定义动画的过程(关键帧)         

  @keyframes name{

                0%|from{

                    css样式

                }

                百分比{

                    css样式

                }

                100%|to{

                    css样式

                }

            }

        2）调用动画

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

                      必须        必须         可选                可选          可选               可选       可选

                      名称  持续时间  速度变化类型  延迟时间  播放次数          播放方向   是否停在最后一帧

 

    2.4 动画的属性

        animation-name: ;  必须  动画的名称

        animation-duration: ;  必须  动画的持续时间  默认0s  取值s ms

        animation-timing-function: ;  可选 动画的速度变化类型  默认ease  取值ease-in  ease-out  ease-in-out  linear

        animation-delay: ;  可选 延迟时间  默认0s  可以取负值

        animation-iteration-count: ;  可选 播放次数  取值数字 Infinity(无限)

        animation-direction: ;  可选 播放的方向 alternate：偶数次倒序播放

        animation-fill-mode: ;  可选 动画是否停在最后一帧  forwards

        animation-play-state: ;  动画的播放状态  默认running  取值paused：暂停 一般配合:hover使用

3. 浏览器兼容性

    3.1 浏览器对C3新特性的支持

        浏览器         厂商前缀        内核(渲染引擎)

        谷歌            -webkit-               blink

        苹果            -webkit-              webkit

        欧朋            -o-                       blink

        火狐            -moz-                  gecko

        IE                 -ms-                   trident

        例子：

        /* 厂商前缀  写在属性前面 */   

    -webkit-border-radius: 30px;

        -moz-border-radius: 30px;

        -o-border-radius: 30px;

        -ms-border-radius: 30px;

        border-radius: 30px;

 

    3.2 IE低版本  css hack

        1）条件hack  -- 同html的位置

            <!--[if 条件]>

                代码块

            <![endif]-->

            条件：

            IE 8：指定版本号

            lt IE 版本号：小于

            lte IE 版本号：小于等于

            gte IE 版本号：大于等于

            gt IE 版本号：大于

            例子：       

    <!--[if lte IE 8]>

                您的浏览器版本太低，请升级

            <![endif]-->

        2）属性hack

            前缀：+ - * _ #  *color:;  +color:;

            后缀：\0  \9  \9\0  !important(优先级最高)  color:red\0;  color:red !important;

4. 媒体查询  media query

    4.1 响应式布局

        适配不同的终端，pc、平板、移动等

    4.2 实现响应式布局

        1）原生媒体查询

        2）bootstrap

        3）rem+js

        4）vw vh

        pc、移动端、app、小程序等

    4.3 优缺点

        优点：能够快速的适配所有终端

        缺点：兼容各种设备工作量大，浏览器解析时间长

    4.4 语法

        1）设置meta标签

            <!-- 移动端适配 -->

            <meta name="viewport" content="width=device-width, initial-scale=1.0">

        2）媒体查询

            ① 内部引入 -- 所有终端的样式写在一个样式文件中

            <!-- 三个终端共同的样式 -->

            <!-- 移动端 -->

            @media screen and (max-width:768px){

                <!-- 移动端的样式 -->

            }


            <!-- 平板 -->

            @media screen and (min-width:768px) and (max-width:992px){

                <!-- 平板的样式 -->

            }


            <!-- pc端 -->

            @media screen and (min-width:992px){

                <!-- pc端样式 -->

            }

 

            ② 外部引入 -- 每个终端写在各自的样式文件中           

<!-- 移动端 -->

<link rel="stylesheet" href="" media="screen and (max-width:768px)">


<!-- 平板 -->

<link rel="stylesheet" href="" media="screen and (min-width:768px) and (max-width:992px)">


<!-- pc -->

<link rel="stylesheet" href="" media="screen and (min-width:992px)">