HTML第十九天

## 一、帧动画

### 1、定义关键帧

```html

@keyframes 动画名称（英文） {

            0% {

                /* 动画的开始 */

            }

            25% {

                /* 在25%的时候进行的一个动画 */

            }

            50% {

                /* 在50%的时候进行的一个动画 */

            }

            100% {

                /* 动画结束 */

            }

        }

    from,to表示开始、结束状态，也可以使用0%,100%定义

        @keyframes 动画名称（英文） {

            from {

                /* 动画开始 */

            }

            to {

                /* 动画结束 */

            }

        }

       

```

### 2、引用帧动画

```html

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

 animation: 动画名称 动画执行时间 动画速度曲线 延迟时间 动画播放次数 动画运动方向 动画结束之后显示的状态

   注意：动画名称和动画执行时间必须写，否则动画无效

        1.animation-name 动画名称 是定义关键帧是所定义的动画名称

        2.animation-duration 动画的执行时间  单位：s/ms

        3.animation-timing-function 规定动画运动的速度曲线

           1.linear 相同的速度从开始到结束，也就是匀速

           2.ease  默认值 慢速度开始--速度变快--慢速度结束

           3.ease-in 慢速度开始的过渡效果，也就是以低速度开始

           4.ease-out 慢速度结束的过渡效果，也就是以低速结束

           5.ease-in-out 以慢速度开始和结束的过渡效果

        4.animation-delay 定义动画何时开始

           单位：s/ms

            取值

            - 以秒或毫秒计

            - 默认值是 0

           

        5.animation-iteration-count 动画的执行次数

           1.n 默认执行动画次数1次

           2.infinite 无限次播放动画

        6.animation-direction 定义是否应该轮流反向播放动画

           1.normal 默认值，正常播放

           2.alternate 动画轮流反向播放

           3.alternate-reverse 从第一次就反向运动

        7.animation-fill-moded动画结束之后的显示状态

           1.both:动画开始或结束的状态

           2.fowards 动画结束时状态

           3.backwards 动画开始的状态

               

          8.animation-play-state: paused;动画播放方式   暂停

                取值：

                running:运动

                paused: 暂停

 

```

## 二、animate.css动画插件

```html

https://animate.style/

https://www.dowebok.com/demo/2014/98/

css3动画库，预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、旋转（rotateIn|rotateOut）、翻转（flip）、淡入淡出（fadeIn|fadeOut）等动画效果。

```

## 使用方法：

- 1、第一步. 引入animate.css文件

```

<link rel="stylesheet" href="css/animate.min.css">

```

- 第二步. 给指定的元素加上指定的动画样式名

  ```html

  animation-name定义动画的效果名称

  animation-duration定义动画持续的时间

  animation-delay 定义动画延迟的时间

  animation-iteration-count: 定义动画重复的次数

  animation-timing-function 定义动画的速度

  animation:动画效果 执行时间 延迟时间 执行次数 速度曲线；

  选择自己想要的动画效果，然后复制粘贴

  第一个animated是必须添加的样式名，第二个是指定的动画样式名。

  <div class="animated fadeInUp"></div>

  2、加统一的类名animated，然后选择自己想要的动画效果，然后复制粘贴

  //1.直接加自己选择的类名

  <h3 class="animated tada">tada</h3>

  <p class="animated rubberBand">rubberBand</p>

  <div class="animated shake">shake</div>

  ```

## 三、css3中过渡和动画的区别？

- 区别：语法、触发、执行次数、复杂度

- 相同点 ： 都是随着时间改变元素的属性值。

- 不同点：

  1、过渡动画是需要触发条件的(hover事件或click事件等)，只能完成简单的动画

  2、帧动画不需要任何的触发条件，可以完成复杂轨迹的动画

# 响应式设计

## 1、什么是响应式设计

也叫响应式布局，响应式开发

实现不同屏幕分辨率的终端上浏览网页的不同展示方式。

响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局，从而在每种设备屏幕宽度下呈现的界面是不同的

### 响应式布局

原理：

* 一个网站适配所有终端，实现不同屏幕分辨率下的终端上网页的不同布局；

* 使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而达到适配不同屏幕的目的

简单的说：

响应式布局是元素随着屏幕发生宽高大小变化 + 盒子布局发生变化

自适应：元素随着屏幕发生宽高大小变化

### 优缺点

优点：

* 1、减少工作量，网站、设计、代码、内容都 只需要一份，多出来的工作量只是JS脚本、CSS样式做一些改变

* 2、节省设计、开发、维护成本【不再特定的维护PC页面，移动页面】

* 3、面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题

缺点：

* 1、兼容问题（IE8以下不支持）

* 2、需要加载更多的样式和脚本文件

* 3、代码累赘，会出现隐藏无用的元素，加载时间加长

* 4、页面设计比较难于精确定位和控制

* 5、影响用户体验(一定程度上改变了网站原有的布局结构，会出现用户混淆的情况,)

Bootstrap框架、苹果官网和星巴克官网使用的响应式布局

响应式网站演示：https://segmentfault.com/

## 2、响应式需要的技术 ：

1.设置视口标签

2.使用媒体查询

3.响应字体

4.响应图片

5.采用百分比

### 1、媒体查询

#### 1、标签设置

   meta标签的设置

   1.虚拟窗口：创建虚拟窗口，自定义窗口的大小和缩放功能，能适应移动设备的屏幕大小

```html

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

```

  2.使用高版本的IE内核浏览器或者Chrome浏览器

```html

<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">

http-equiv = "X-UA-Compatible":

这个是针对ie8以上浏览器的一个属性，ie8以下无法识别。就是说ie8以上浏览器遇到这个属性会执行content的描述，大小写不敏感。

```

#### 2、使用媒体查询适配对应样式

可以根据设备显示器的特性，来设置不同的css的样式

### 2、媒体查询的引入方式和语法

#### 1、媒体查询的语法

```html

媒体查询的语法：

       

         @media mediaType and (media feather) {

            选择器 {

                属性名：属性值

            }

        }

多个条件：

       @media mediaType and (media feather) and (media feather){

            选择器 {

                属性名：属性值

            }

        }

        mediaType：设备类型

        media feather：媒体特性表表达式

 

 1.mediaType设备类型：

     all:所有的多媒体设备

     print:打印机或打印预览

     screen：电脑屏幕、平板电脑、智能手机等

     speech：屏幕阅读器等发声设备

2.media feather:媒体特性表达式

      width：浏览器的宽度

      height:浏览器的高度

      max-width：最大宽度

      min-width:最小宽度

      device-width:设备宽度

      device-height:设备高度

      max-device-width:最大设备宽度

      min-device-width:最小设备宽度

      orientation:设备的窗口朝向

          1.横屏   宽度比高度大   orientation:landscape;

          2.竖屏   高度比宽度大   orientation:portrait;

     

3.操作符

- and(与、和)

  not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备)

  only: 用来定某种特别的媒体类型。

  /* 除了 speech 设备都可以用*/

    @media not speech {

      body {

        background-color: tomato;

      }

    }

    /* 只能在screen设备能用 */

    @media only screen {

      body {

        background-color: yellowgreen;

      }

    }

```

* 媒体查询小案例--只在打印设备显示

```html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Document</title>

    <style>

        .txt {

            font-size: 30px;

            display: none;

        }

        /* 媒体查询 打印设备  在浏览器中鼠标右击，有打印两个字  点击就可以哦 */

        @media print {

            .txt {

                display: block;

            }

        }

        /* display: none; 隐藏元素

           display: block; 显示元素

       

         */

    </style>

</head>

<body>

    <p class="txt">你看不见我，只能在打印设备才能看的见我哦</p>

</body>

</html>

```

#### 2、媒体查询的引入方式

#####  1.内部方式引入

```html

 <style>

        body {

            background-color: red;

        }

        /* 横屏 宽大于高 */

        @media screen and (orientation: landscape) {

            body {

                background-color: yellow;

            }

        }

        /* 竖屏 高大于宽 */

        @media screen and (orientation: portrait) {

            body {

                background-color: pink;

            }

        }

    </style>

```

#####  2.外链式

```css

 在html的head标签的内部使用link标签引入外部的css文件（后缀名为.css的文件）

    <head>

    <link rel="stylesheet" href="./css/demo.css">

    </head>

    body {

        background-color: pink;

    }

    /* 横屏 宽大于高 */

    @media screen and (orientation: landscape) {

        body {

            background-color: tomato;

        }

    }

    /* 竖屏 高大于宽 */

    @media screen and (orientation: portrait) {

        body {

            background-color: yellowgreen;

        }

    }

    <!-- 只有横屏时有样式 -->

    <link rel="stylesheet" href="./css/demo.css" media="screen and (orientation: landscape)">

    <!-- 只有竖屏时有样式 -->

    <link rel="stylesheet" href="./css/demo.css" media="screen and (orientation: portrait)">

```

### 3、媒体查询常见的媒体尺寸设置

通过媒体查询，针对不同的设备的尺寸设置断点来改变布局

```html

屏幕        设备        断点

超小屏幕     手机        <768px

小屏幕       平板        >=768px ~ <992px  

中等屏幕      桌面       >=992px ~ <1200px

大屏幕       桌面        >=1200px      

   

   

常用媒体查询尺寸：

    1200px

    1100px    1000px   1024px

    980px

    768px     720px

    640px

    480px

    375px

    320px

    280px

   

```