动画2及Flex弹性盒布局

一、rotate旋转的补充

三个轴不同角度的写法

transform: rotateX(30deg) rotateY(60deg) rotateZ(30deg);

旋转角度一样 简写的方法

rotate3d（x,y,z） 1和0 类似于开关的意思

第一个表示是否绕着x轴旋转 如果是 就填1 不是就填0

第二个表示是否绕着y轴旋转 如果是 就填1 不是就填0

第三个表示是否绕着z轴旋转 如果是 就填1 不是就填0

例： transform: rotate3d(1,1,1,30deg);

都是1 表示 x y z轴都旋转30度

二、animation动画补充

1.animation-fill-mode  

                            选择动画结束时候的模式 是会到原来的位置 还是回到结束的位置

                               forwards 表示会停在结束的位置

                              backwards  默认值 会返回原来的位置

2.animation-play-state

                                  paused;     里面的元素的动画播放暂停

                                  running;     默认动画是暂停的 手摸上去之后让动画开始跑

     

forwards running

backwards paused

3.两个图片的缓慢出现

第一种，给图片设置宽度

 

 第二种直接加进去，然后设置宽度

 animation 简写 动画名和 过渡时间 是必填项 

         animation: donghua 1s;

不然出现不了动画

三、Flex弹性盒布局

1.Flex的发展史

 2009年W3C 提出概念，但是官方没有flex这个词

2011年浏览器厂商决定使用flexbox，来形容它的布局特点

2015年W3C正式将其修改为flexbox布局

2016年5月官方正式公布最新的稳定的flex布局规范标准，各大浏览器的支持越来越稳定

2.定义

 Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性

3.作用

它能够更加高效方便的控制元素的对齐、排列

可以自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的

控制元素在页面的布局方向

按照不同于DOM所指定排序方式对屏幕上的元素重新排序

4.应用场景

  使用在现代浏览器中

  有一定宽容度要求的设计中

相对

        宽容度要求较高

绝对

        宽容度要求较低，100%还原设计稿

5.Flex基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”

水平主轴（main axis）

垂直交叉轴（cross axis）

项目默认沿主轴排列

6.Flex布局语法

块级元素 display : flex;

行内元素 display : inline-flex;

注意

添加前缀 -webkit-   -moz-   -ms-  -o-

设为 Flex 布局以后，flex item的float、clear和vertical-align属性将失效

7.flex-direction

              决定主轴的方向（即项目的排列方向） 

（1） row           

                        (默认 item从左到右的顺序排列) 主轴为水平方向，起点在左端

 

（2） row-reverse

                       (会改变item的排列方向 改为 从右到左的顺序   主轴仍然是水平方向)

 

（3）column

                           会改变主轴方向 改成垂直方向 是从上到下的顺序 排列item

          

 

（4）column-reverse

                                会改变顺序 改成从下到上的顺序 主轴还是垂直方向  

8.flex-wrap

                                定义如果在一条轴线排不下，如何换行     

（1） nowrap

                         （默认）不换行    项目都排在一条线（又称"轴线"）上

 

（2）wrap

                            换行，第一行在上方 

 

（3）wrap-reverse

                             换行，第一行在下方 

     

  flex-flow是复合属性：是flex-direction和flex-wrap的简写形式，默认值为row nowrap 

          属性值：取两个属性的值即可 只写一个值 另一个就是默认值       

 9.justify-content 

                                定义了项目在主轴上的对齐方式 

                                建议子元素不要设置margin

（1） flex-start

                        （默认值）左对齐

 

（2）flex-end

                          右对齐 

 

（3） center

                         居中

                        就算有margin也会把整个item居中 并且左右两边item的距离边框的大小相等 

 

（4） space-between

                          两端对齐

                          项目之间的间隔都相等（就要item设置了margin 项目之间的间隔也相等）

 

（5） space-around

                                每个项目两侧的间隔相等

                                所以，项目之间的间隔比项目与边框的间隔大一倍

                               不受margin的干扰 会把margin的大小计算在内

         

 

       

（6）space-evenly

                       item项目之间左右的间距以及项目和边框之间的间距 都相等

 

★会受到子元素item设置margin的影响 item距离两侧的距离相等 item项目之间的距离相等

            但是 item距离两侧的距离 和 item项目之间的距离 不相等

 10.align-items

                                 定义项目在交叉轴上对齐方式  

（1） flex-start

                       交叉轴的起点对齐 默认值 

 

（2） flex-end

                      交叉轴的终点对齐  

 

（3） center

                        交叉轴的中点对齐 

 

（4）baseline

                        项目的第一行文字的基线对齐  

                        需要给第一行item的文字 设置行高 

           

 

（5） stretch

                        （默认值）如果项目未设置高度或设为auto，将占满整个容器的高度