CSS

标签（空格分隔）： css

CSS复合选择器

后代选择器

元素1 元素2 { 样式声明 }

空格隔开
儿子 孙子 重孙子···
div a{} 选择div的后代所有的a

    <div class="nav">
		<a href="#">儿子</a>
		<p><a href="#">孙子</a></p>
	</div>

子选择器

元素1>元素2 { 样式声明 }

>大于号隔开
亲儿子选择器
div a{} 最终选择a 不会选择p下的a

    <div class="nav">
		<a href="#">儿子</a>
		<p><a href="#">孙子</a></p>
	</div>

并集选择器

元素1,元素2 { 样式声明 }

,逗号隔开
多个选择器
任何形式的选择器都可以作为并集选择器的一部分

div,
p {
	color: pink;
	}

div与p被选中

<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
	<li>小猪佩奇</li>
	<li>猪爸爸</li>
	<li>猪妈妈</li>
</ul>

伪类选择器

：

给选择器添加特殊效果
:冒号

链接伪类选择器

按LVHA顺序，确保生效

a:link      /* 选择所有未被访问的链接 */
a:visited   /* 选择所有已被访问的链接 */
a:hover     /* 选择鼠标指针位于其上的链接 */
a:active    /* 选择活动链接（鼠标按下未弹起时）

:focus伪类选择器

用于选取获取焦点的表单元素
焦点就是光标 一般才能获取，该选择器主要针对表单元素来说

input:focus{
    background-color:yellow;
}

CSS元素显示模式

HTML元素一般分为块元素与行内元素

块元素

• 特点：

1. 独占一行
2. 高度 宽度 外边距 内边距 可控制
3. 宽度默认是容器（父级宽度）的100%
4. 是一个容器及盒子 里面可以放行内或者块元素

注意

• 文字类的元素不能使用块级元素
• <p>标签主要用于存放文字，因此<p>里面不能放块级元素，尤其<div>
• <h1>~<h6>不能放其他块级元素

行内元素

• 行内元素也叫内联元素
• 特点

1. 相邻行内元素在一行上，一行可以显示多个
2. 高 宽 设置是无效的
3. 默认宽度就是本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素

• 注意
• 链接中不能再放链接
• 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

行内块元素

• 特点

1. 和相邻（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
2. 默认宽度就是本身内容的宽度（行内元素特点）
3. 高度 行高 外边距 内边距 可控制（块级元素特点）

• 如 等

元素显示模式转换

一个模式需要另一种模式的特性
比如想要增加链接<a>的触发范围

CSS背景

###背景颜色

background-color : transparent | 颜色值;
一般情况下元素背景颜色默认值是transparent（透明）

背景图片

background-image : none | url(url)
常用于logo或装饰性小图片或超大的背景图片
优点是便于控制位置
background-repeat ： repeat | no-repeat | repeat-x | repeat-y 对背景图像进行平铺
background-size 图片大小 宽
background-position ： x y 控制图片位置 xy可使用方位名词（center bottom left right）或精确单位
1.方位名词 xy与yx等价
只写一个另一个默认为居中（水平|垂直）
2.精确单位x y有严格的顺序
只写一个一定为x 另一个y默认居中（垂直）
3.混合使用 xy顺序严格
background-attachment : scroll | fixed 控制背景图滚动|固定

CSS优先级

CCS三大特性：层叠 继承 优先级

| 选择器 | 权重 |
| - | -: |
| 继承 或* | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择权，伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式style="" | 1,0,0,0 |
| !important 重要的 | 无穷大 |

• 优先级注意点：

1. 权重是有4组数字组成但是不会有进位
2. 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
3. 等级判断从左到右，如果某一位数值相同，则判断下一位数值
4. 继承的权重为0

• 权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重（会叠加 但永远不会有进位）

CSS盒子模型

border边框

• 边框会影响盒子实际大小

1. 测量盒子大小时不量边框
2. 如果测量包含了边框 需要width/height减去边框宽度

border可以设置元素的边框
边框有三部分组成：边框宽度（粗细） 边框样式 边框颜色
border : border-width | border-style | border-color
边框简写：border : 1px solid red; 没有顺序
border-collapse : collapse 相邻边框合并

content

padding内边距

设置内边距 即边框与内容之间的距离

• 简写属性

  | 值的个数 | 表达意思 |
  | - | - |
  | padding: 5px ; | 1个值，代表上下左右都有5像素的内边距 |
  | padding: 5px 10px ; | 2个值，代表上下内边距是5像素 左右内边距是10px |
  | padding: 5px 10px 20px ; | 3个值，代表上内边距5像素 左右内边距10像素 下内边距20像素 |
  | padding: 5px 10px 20px 30px ; | 4个值，上是5像素 右10像素 下20像素 左30像素 顺时针 |

• padding也会影响盒子实际大小

• 需要width/height减去边框宽度

• 如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

margin（外边距）

用于设置外边距 控制盒子与盒子之间的距离
简写与padding格式相同

• 典型应用：盒子水平居中

1. 盒子必须指定了宽度(width)
2. 盒子左右的外边距都
3. 常用写法
   margin-left:auto;margin-right:auto; | margin:auto; | margin: 0 auto;

• 注意：以上居中为块元素水平居中
• 行内元素或者行内块元素水平居中给其父元素添加 text-align:center即可

外边距合并

1. 相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top。则他们之间的垂直间距不是margin-bottom与margin-top之和取两个值中的较大者这种现象称为相邻块元素垂直外边距的合并

• 解决方法：尽量只给一个盒子添加margin值

2. 嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素上有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

• 解决方法：
  1. 可以为父元素定义上边框
  2. 可以为父元素定义上内边距
  3. 可以为父元素添加overflow:hidden

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。转换为块级和行内块元素就可以了

圆角边框

border-radius : length;

• 参数可以为数值或百分比
• 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写50%
• 如果是矩形，设置高度的一半可以做大圆角效果
• 简写：左上 右上 右下 左下（顺时针）
• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

盒子阴影

border-shadow: h-shadow v-shadow blur spread color inset;

| 值 | 描述 |
| - | - |
| h-shadow | 必需。水平阴影的位置，允许负值 |
| v-shadow | 必需。垂直阴影的位置，允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的尺寸 |
| color | 可选。阴影的颜色 |
| inset | 可选。将外部阴影（outset）改为内部阴影 |

• 默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效
• 盒子阴影不占用空间，不会影响其他盒子排列

文字阴影

border-shadow: h-shadow v-shadow blur color;

| 值 | 描述 |
| - | - |
| h-shadow | 必需。水平阴影的位置，允许负值 |
| v-shadow | 必需。垂直阴影的位置，允许负值 |
| blur | 可选。模糊距离 |
| color | 可选。阴影的颜色 |

CSS浮动

传统网页布局的三种方式

网页布局的本质————用CSS来摆放盒子。把盒子摆放到相应位置CSS提供了三种传统布局方式
多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

• 普通流（标准流/文档流）

  • 标签按照规定好默认方式排列
  1. 块级元素会独占一行，从上向下顺序排列
  2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

• 浮动（float）

• 定位

• 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。浮动可以改变元素标签默认的排列方式
  • 可以让多个块级元素一行内排列显示
  • float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

浮动特性

1. 浮动元素会脱离标准流（脱标）
2. 浮动的元素会一行内显示并且元素顶部对齐
3. 浮动的元素会具有行内块元素的特性
   • 任何元素都可以浮动，不管原先什么模式的元素，添加浮动后具有行内块元素相似的特性
4. 浮动的盒子不再保留原先的位置

浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。符合网页布局第一准则

浮动布局注意点

1. 浮动和标准流的父盒子搭配
   • 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2. 一个元素浮动了，理论上其余的兄弟元素也要浮动
   • 一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题
   • 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流粗体文本

清除浮动

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子
选择器{clear:属性值；}

| 属性值 | 描述 |
| - | - |
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |

清除浮动方法

1. 额外标签法也称为隔墙法，是W3C推荐的做法
   • 在元素末尾添加一个空的标签如 <div style="clear:both"></div>或者其他标签（如<br/>等）
   • 优点：通俗易懂，书写方便
   • 缺点：添加许多无意义标签，结构化较差
   • 注意：新的空标签必须是块级元素
2. 父级添加overflow属性
   • 给父级添加overflow属性，属性值设置为hidden、auto或scroll
   • 优点：代码简洁
   • 缺点：无法显示溢出的部分

3. .clearfix:after {
       content: "";
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
   }
   .clearfix { /* IE6、7专有 */
       *zoom: 1;
   }
   

• 父级内的浮动无法清除，影响的为父级外的元素排列（:after是在父盒子中最后添加墙而标签法墙的位置可设置）

   .test .a {
       float: left;
       width: 300px;
       height: 300px;
       background-color: red;
}

   .test .b {
       float: left;
       width: 200px;
       height: 200px;
       background-color: green;
   }
   .test .c {
       /* width: 300px; */
       height: 300px;
       background-color: blue;
   }
   //用after不会使c不在a,b下方

- 优点：没有增加标签，结构更简单
- 缺点：照顾低版本浏览器

4. 父级添加双伪元素

   • 也是给父元素添加

   .clearfix:before,
   .clearfix:after {
       content:"";
       display:table;
   }
   .clearfix:after {
       clear:both;
   }
   .clearfix {
       *zoom:1
   }
   
   

   • 优点：代码更简洁
   • 缺点：照顾低版本浏览器
   • 代表网站：小米、腾讯等

CSS属性书写顺序

• 建议遵循以下顺序：
  1. 布局定位属性：display/position/float/clear/visibility/overflow(建议display第一个写，毕竟关系到模式)
  2. 自身属性：width/height/margin/padding/border/background
  3. 文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
  4. 其他属性（CSS3）：content/cursor/border-radius/box-shadow/text-shadow/background：linear-gradient...

CSS定位

可以让盒子在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

定位组成

将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
定位 = 定位模式 + 边偏移

1. 定位模式

   • 定位模式决定元素的定位方式，通过position属性来设置，值可分为4个：

   | 值 | 语义 |
   | - | - |
   | static | 静态定位 |
   | relative | 相对定位 |
   | absolute | 绝对定位 |
   | fixed | 固定定位 |

2. 边偏移

   • 边偏移就是定位的盒子移动到最终位置。有top、bottom、left、right 4个属性

   | 边偏移属性 | 示例 | 描述 |
   | - | - | - |
   | top | top:80px | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
   | bottom | bottom:80px | 底部偏移量，定义元素相对于其父元素下边线的距离 |
   | left | left:80px | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
   | right | right:80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |

静态定位static

静态定位是元素的默认定位方式，无定位的意思
语法：选择器 {position:static;}

• 静态定位按照标准流特性摆放位置，他没有边偏移
• 静态定位在布局时很少用到

相对定位relative

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）
语法：选择器 {position:relative;}

特点

1. 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
2. 原来在标准流的位置继续占有，后面的盒子依然以标准流的方式对待它（不脱标，继续保留原来位置）
   • 典型应用为给绝对定位当爹

绝对定位absolute

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）
语法：选择器 {position:absolute;}

特点

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
3. 绝对定位不再占有原先的位置（脱标）

• 绝对定位的盒子居中
  • 加了绝对定位的盒子不能通过margin:0 auto;水平居中
  • 解决方法： top:50%;margin-top:自身（宽或高）一半

子绝父相

子级使用绝对定位，父级需要相对定位

1. 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
2. 父盒子需要加定位限制子盒子在父盒子内显示

固定定位fixed

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变
语法：选择器 {position:fixed;}

特点

1. 以浏览器可视窗口为参照点移动元素

• 跟父元素没有任何关系
• 不随滚动条滚动

2. 不占有原先的位置

• 固定定位小技巧：固定在版心右侧

  • 小算法
  1. 让固定定位盒子left:50%走到浏览器可视区的一半
  2. 让固定定位盒子margin-left:版心宽度一半距离

粘性定位sticky

粘性定位可以被认为是相对定位和固定定位的混合
语法：选择器 {position:sticky;top:10px;}

特点

1. 以浏览器可视窗口为参照点移动元素（固定定位特点）
2. 粘性定位占有原先的位置（相对定位特点）
3. 必须添加top、bottom、left、right其中一个才有效

• 跟页面滚动搭配使用 兼容性差 IE不支持

定位叠放次序z-index

在使用定位布局时，可能出现盒子重叠的情况，此时可使用z-index来控制盒子的前后次序（z轴）
语法：选择器 {z-index:1;}

• 数值可以是正整数、负整数或0 默认是auto，数值越大盒子越靠上
• 如果值相同，则按照书写顺序，后来居上
• 数字后面不能加单位
• 只有定位的盒子才有z-index属性

定位特殊特性

• 绝对定位和固定定位也和浮动类似
  1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
  2. 块级元素添加绝对或者固定定位，如果不给宽度和高度，默认大小是内容大小
• 脱标的盒子不会触发外边距塌陷
  • 浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题
• 绝对定位（固定定位）会完全压住盒子
  • 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
  • 但是绝对定位（固定定位）会压住标准流所有的内容
  • 浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素

元素的显示与隐藏

1. display显示隐藏

   • display属性用于设置元素如何显示
   • display:none; 隐藏对象
   • display:block; 除了转换块级元素之外，同时还有显示元素的意思
   • display隐藏元素后，不再占有原来位置

2. visibility显示隐藏 可视性

   • visibility:visible; 元素可视
   • visibility:hidden; 元素隐藏
   • visibility隐藏元素后，继续占有原来的位置

3. overflow溢出显示隐藏 溢出

   | 属性值 | 描述 |
   | - | - |
   | visible | 不剪切内容也不添加滚动条 |
   | hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
   | scroll | 不管超出内容否，总是显示滚动条 |
   | auto | 超出自动显示滚动条，不超出不显示滚动条 |

   • 有定位的盒子 慎用overflow:hidden 因为它会隐藏多余的部分

CSS高级技巧

精灵图

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度 出现了CSS精灵技术

核心原理：将网页中一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

缺点：图片文件较大、图片本身放大缩小会失真 图片制作完成更换复杂

字体图标

主要用于显示网页中通用、常用的一些小图标
展示的是图标，本质属于字体

优点
轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了。图标就会马上渲染出来，减少了服务器请求
灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性：几乎支持所有浏览器，请放心使用

字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化
icomoon字库阿里iconfont字库

CSS三角形

定义一个盒子 宽高为0 边框设置 border:10px solid transparent; boder-top-color:red

• 强化

  width:0;
  heiht:0;
  border-color:transparent red transparent transparent;
  border-style:solid;
  border-width:22px 8px 0 0;
  

鼠标样式

li{cursor:pointer;}

| 属性值 | 描述 |
| - | - |
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |

轮廓线outline

• 给表单添加outline:0;或者outline:none;后就可以去掉默认的蓝色边框

防止拖拽文本域resize

• textarea{resize: none;}

vertical-align

• 用于设置一个元素的垂直对齐方式，只针对行内元素或行内块元素

• vertical-align :baseline | top | middle | bottom

  值	描述
  baseline	默认，元素放置在父元素的基线上
  top	把元素的顶端与行中最高元素的顶端对齐
  middle	把元素放置在父元素的中部
  bottom	把元素顶端与行中最低元素的顶端对齐

解决图片底部默认空白缝隙

1. 给图片添加 vertical-align:middle|top|bottom提倡使用
2. 把图片转换为块级元素 display:block;

溢出文字省略号显示

• 单行文本溢出显示省略号--必须满足三个条件

  • 强制一行内显示文本 white-space:nowrap;(默认 normal自动换行)
  • 超出的部分隐藏 overflow:hidden;
  • 文字用省略号替代超出的部分 text-overflow:ellipsis;

• 多行文本溢出显示省略号

  • 有较大兼容性问题，适合webkit浏览器或移动端

  overflow:hidden;
  text-overflow:ellipsis;
  /*弹性伸缩盒子模型显示*/
  display:-webkit-box;
  /*限制在一个块元素显示的文本的行数*/
  -webkit-line-clamp:2;
  /*设置或检索伸缩盒对象的子元素的排列方式*/
  -webkit-box-orient:vertical;
  

CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化

CSS初始化是指重设浏览器的样式（也称CSS reset）
每个网页都必须首先进行CSS初始化

CSS3新特性

1. 属性选择器
   • E[att="val"] 选择具有att属性且属性值等于"val"
   • E[att^="val"] 选择具有att属性且属性值开头为"val"
   • E[att$="val"] 选择具有att属性且属性值末尾为"val"
   • E[att*="val"] 选择具有att属性且属性值包含"val"
2. 结构伪类选择器
   • E:first-child 匹配父元素的第一个子元素E
   • E:nth-child(n) 匹配父元素的第n个子元素E
   • E:last-child 匹配父元素的最后一个子元素E
   • E:first-of-type 匹配同类型中的第一个同级兄弟元素E
   • E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
   • E:last-of-type 匹配同类型中的最后一个同级兄弟元素E
     nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看是否和E匹配
     nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E 找第n个孩子
3. 伪元素选择器
   • E::before 在元素内部的前面插入
   • E::after 在元素内部的后面插入
   • 属于行内元素，文档树中是找不到的，所以称为伪元素
   • 必须有content属性，和标签选择器权重相同为1

CSS3盒子模型

box-sizing

1. box-sizing:content-box 盒子大小为width+padding+border（以前默认的）
2. box-sizing:border-box 盒子大小为width

• 如果盒子模型改为了border-box 那padding和border就不会撑大盒子（前提padding和border不会超过width宽度）

CSS3滤镜filter

filter: 函数(); 如 filter:blur(5px);blur模糊处理 数值越大越模糊

CSS3 calc函数

` width:calc(100%-80px);

CSS3过渡

transtion:要过渡的属性 花费时间 运动曲线 何时开始;

1. 属性：想要改变的CSS属性 宽度高度 背景颜色 内外边距 想要所有可写all
2. 花费时间：单位秒 如5s
3. 运动曲线：默认ease 可省略
4. 何时开始：单位秒 设置延迟触发时间 默认0s 可省略

CSS3 2D转换

• transform转换 可以实现元素的位移、旋转、缩放
• transform-origin转换中心点 transform-origin:x y;
  • 注意后面的参数x y用空格隔开
  • x y默认转换的中心点是元素的中心点(50% 50%)
  • 还可以给x y设置 像素 或者方位名词(top bottom left right center)

移动：translate

• transform:translate(x,y) x就是x轴上移动位置 y就是y轴上移动位置
• translate最大的优点：不会影响到其他元素位置
• translate中的百分比单位是相对于自身元素的translate(50%,50%)
• 对行内标签没有效果

旋转：rotate

• transform:rotate(度数deg)
• 角度为正时，顺时针，负时，为逆时针
• 默认旋转的中心点是元素的中心点

缩放：scale

• transform:scale(x,y)
• x,y用逗号分隔
• transform:scale(1,1) 宽和高都放大一倍 相当于没有放大
• transform:scale(2,2) 宽和高都放大二倍
• transform:scale(2) 只写一个参数 相当于scale(2,2)
• transform:scale(0.5,0.5) 缩小
• 可以设置转换中心点缩放，默认以中心点缩放 不影响其他盒子

2D转换综合写法

• 同时使用多个转换，其格式为:transform: translate() rotate() scale()
• 其顺序会影响转换的效果（先旋转会改变坐标轴方向）
• 当同时有位移和其他属性，要将位移放到最前方

CSS3 动画

动画（animation）可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果
相比较过渡 动画可以实现更多变化 更多控制，连续自动播放等效果

动画的基本使用

1. 用keyframes定义动画（类似定义类选择器）

   @keyframes 动画名称{
       0%{
           transform: translateX(0);
       }
       100%{
           transform: translateX(1024px);
       }
   }
   

2. 元素使用动画

   div {
       width: 200px;
       height: 200px;
       background-color: #234;
       animation-name: 动画名称;
       animation-duration: 持续时间;
   }
   

动画序列

• 0%是动画的开始 100%是动画的完成 这样的规则就是动画序列
• 百分比是总的时间的划分
• 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
• 动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的次数
• 用百分比来规定变化发送的时间，或用关键字from to 等同于 0% 100%

动画常用属性

动画简写属性

• animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始或结束的状态

动画曲线细节

CSS 3D转换

• 近大远小
• 物体后面遮挡不可见
• 三维坐标系
  • x轴：水平向右 x右边是正值，左边是负值
  • y轴：垂直向下 y下面是正值，上面是负值
  • z轴：垂直屏幕 往外面是正值，往里面是负值

3D位移 translate3d(x,y,z)

3D旋转 rotate3d(x,y,z)

• 可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转
• transform:rotateX(45deg):沿着x轴正方向旋转45deg
• transform:rotateY(45deg):沿着y轴正方向旋转45deg
• transform:rotateZ(45deg):沿着z轴正方向旋转45deg
• transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg度
• 左手准则
  • 左手的手拇指指向x轴的正方向
  • 其余手指的弯曲方向就是该元素沿着x轴旋转的方向

透视 perspective

• 在2D平面产生近大远小视觉立体
• 透视单位是像素
• 透视写在被观察元素的父盒子上面
  • d：就是视距 视距就是一个距离人的眼睛到屏幕的距离
  • z：就是z轴 物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大

3D呈现 transfrom-style

• 控制子元素是否开启三维立体环境
• transform-style:flat 子元素不开启3d立体空间 默认的
• transform-style:preserve-3d 子元素开启立体空间
• 代码写给父级 但是影响的是子盒子