css笔记-一起编程

1、选择器

1.1基础选择器

通配符选择器（*），标签选择器，类选择器，id选择器

1.2复合选择器

后代选择器	元素1 元素2
子元素选择器	元素1>元素2(亲儿子)
并集选择器	元素1,元素2

链接伪类选择器:
a:link	未访问的链接
a:visited	已访问的链接
a:hover	鼠标经过的链接
a:active	鼠标按下未弹起的链接

focus伪类选择器：选取获得光标的表单元素（input:focus）

2、字体属性font

属性	属性值	作用
font-family	如“microsoft yahei”	字体类型
font-size	如“10px”	字体大小
font-weight	normal/bold	字体粗细（400~700）
font-style	italic/normal	字体格式

font:font-style font-weight font-size/line-hight font-family

3、文本属性

属性	属性值	作用
color	white/#fff/rgb(255,255,255)	设置文字颜色
text-align	left/center/right	水平对齐方式
text-decoration	none/underline/overline/line-though	装饰文本
text-indent	如“2em”	文本缩进

4、外部样式表CSS引入方式

5、元素显示模式

5.1、块级元素（独占一行，可设置宽高）

文字类的块元素中间不允许放其他块元素：<h1>~<h6>,<p>

5.2、行内元素（一行可以放多个元素，无法设置宽高。行内元素只能容纳行内元素）

<a>里面可以放块级元素，但不允许嵌套链接

5.3、行内块元素（一行显示多个元素，可以设置宽高）

5.4、行内元素与块元素的转化 display

属性	作用
display:block	转化为块级元素
display:inline	转化为行内元素
display:inline-block	转化为行内块元素

5.5、line-height : height：单行文字垂直居中

6、背景

6.1、背景颜色background-color：默认 transparent 透明

6.2、背景图片background-image:url()

6.3、背景平铺background-repeat: no-repeat|repeat-x|repeat-y

6.4、背景图片位置background-position: x y

x，y是方位名词，无顺序之分

指定一个方位名词，另一个默认居中对齐

如果给定精确数值，则第一个数值为x轴，第二个数值为y轴

如果只给定一个精确数值，则为x轴，y轴默认垂直居中

混合单位：一个精确数值，一个方位名词，则第一个值为x轴，第二个值为y轴

6.5、背景图像固定background-attachment

参数	作用
scroll(默认)	背景图像随对象内容滚动
fixed	背景图像固定

6.6、背景色半透明：background: rgba(0,0,0,0.3)

背景复合写法：background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

6.7、背景色渐变：background：linear-gradient(方向，开始颜色位置，颜色2 位置，颜色3 位置……)

方向参数

设置的是线性渐变的方向

取值可以取to top / to right / to bottom / to left

也可以取0deg / 90deg / 180deg / 270deg

默认值是 to bottom (270deg)

位置参数

设置百分比

7、层叠性

样式冲突，后写的覆盖前面的样式

样式不冲突，不会层叠

8、继承性

子元素可以继承父元素的样式：（text-，font-，line-这些元素开头的可以继承，以及color属性）

行高的继承性：

body {
   font:12px/1.5MicrosoftYaHei；
 }

行高可以跟单位也可以不跟单位

如果子元素没有设置行高，则会继承父元素行高的1.5倍，此时子元素的行高是：当前子元素的文字大小 * 1.5

body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

9、优先级

选择器	选择器权重
继承或*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内样式style=””	1,0,0,0
!important	无穷大

优先级注意点:

权重是有4组数字组成,但是不会有进位。

可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..

等级判断从左向右，如果某一位数值相同，则判断下一位数值。

可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.

继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

10、盒子模型

10.1、边框border

属性	作用
border-width	边框粗细
border-style	solid实线，dashed虚线，dotted点线
border-color	边框颜色

10.1.1、圆角边框：border-radious:length（数值/百分比）

10.1.2、表格相邻边框合并：border-collapse:collapse

10.2、内边距padding

值的个数	作用
padding:5px	代表上下左右都有5像素内边距
padding:5px 10px	代表上下内边距是5像素，左右内边距是10像素
padding:5px 10px 20px	代表上内边距是5像素，左右内边距是10像素，下内边距是20像素
padding:5px 10px 20px 30px	代表上是5像素，右是10像素，下是20像素，左是30像素

10.2.1、没有指定with的值，则padding不会撑开盒子宽度

10.3、外边距margin

10.3.1、块级元素水平居中：margin:0 auto

10.3.2、行内块元素或行内元素水平居中，为其父元素添加text-align:center

10.3.3、相邻块级元素外边距合并，取最大的一个值作为外边距

10.3.4、嵌套块元素垂直外边距的塌陷

解决方案：

为父元素添加边框

为父元素定义内边距（提倡）

为父元素添加overflow:hidden

11、去掉 li 前面的小圆点

list-style:none

12、去掉输入框的轮廓线

outline:none

13、盒子阴影

box-shadow:h-shadow v-shadow blur spread color inset（默认outset，不允许写出来）

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

14、文字阴影

text-shadow:h-shadowv-shadowblurspreadcolor

15、浮动

15.1、标准流

15.1.1、块级元素独占一行。如<div>,<li>,<ul>,<ol>,<h1>~<h6>,<p>

15.1.2、行内元素从左向右依次排列。如<span>,<a>,<i>,<em>

15.2、浮动

准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

先设置盒子大小，再设置盒子位置

float:属性值

属性值	描述
none	不浮动，默认值
left	向左浮动
right	向右浮动

15.2.1脱标

15.2.2浮动的盒子不再保留原先的位置

<html lang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .box1 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <divclass="box1">浮动的盒子</div>
    <divclass="box2">标准流盒子</div>
</body>
</html>

15.2.3任何元素都可以添加浮动，添加浮动之后则具有行内块元素的特性

如果块级盒子没有设置宽度，则和父元素一样，添加浮动后宽度由内容撑开

浮动的盒子中间没有缝隙

浮动的盒子不会超出父盒子

15.2.4一个元素浮动，其余亲兄弟元素也要浮动

浮动的盒子不会影响前面的标准流盒子，只会影响后面标准流盒子

15.2.5清除浮动：

如果父盒子没有固定的高度时，子元素浮动时不占位置，这时父盒子高度变为0，后面的标准流盒子会占据其父盒子的位置，所以需要清除浮动

额外标签法

.clear{clear:both}   
<divclass="box">
    <divclass="box1">子元素1</div>
  <divclass="box2">子元素2</div>
    <divclass="clear"></div>
</div>

父级添加overflow:hidden属性

:after伪元素法

.clearfix:after {  
   content: ""; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;  
 } 
.clearfix {  /* IE6、7 专有 */
   *zoom: 1;
 }   
<divclass="box clearfix">
    <divclass="box1"></div>
    <divclass="box2"></div>
</div>

双伪元素清除浮动

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

16、定位position

16.1、原因：可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个地方，并且可以压住其他盒子

16.2、定位=定位模式+边偏移

定位模式

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘性定位

（1）静态定位：默认值，相当于标准流

（2）相对定位：不脱标，原来位置还会保留

（3）绝对定位（脱标）：没有父元素或父元素没有定位，则以浏览器当前可视区域为准；父元素有定位，则以最近一级父元素为准

（4）固定定位（脱标）：以浏览器可视区域为准

（5）粘性定位：以浏览器可视区域为准，保留原来位置，必须添加 top 、left、right、bottom 其中一个才有效，跟页面滚动搭配使用。兼容性较差，IE 不支持。

边偏移

值	描述
top	距离父元素上面的距离
bottom	距离父元素下面的距离
left	距离父元素左边的距离
right	距离父元素右边的距离

16.3.1、定位的叠放次序z-index

属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；

如果属性值相同，则按照书写顺序，后来居上；

数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

16.3.2、定位拓展

（1）加了绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。使用如下方法：

left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；

margin-left: -100px;：让盒子向左移动自身宽度的一半。

（2）行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

（3）块级元素添加绝对定位或者固定定位，如果不设置宽高，则默认大小为内容的大小。

（4）脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。

（我们以前是用padding、 border 、overflow解决的）

我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

（5）绝对定位、固定定位会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

但是绝对定位、固定定位会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

（6）元素的显示与隐藏

display（display 隐藏元素后，不再占有原来的位置。）

属性值	说明
block	显示
none	隐藏

visibility（visibility 隐藏元素后，继续占有原来的位置。）

属性值	说明
visible	显示
hidden	隐藏

overflow

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

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。

17、精灵图

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

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

17.3用法：

精灵图主要针对于小的背景图片使用。

主要借助于背景位置来实现—background-position 。

一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）

18、字体图标

18.1原因：

①精灵图缺点

图片文件还是比较大的。

图片本身放大和缩小会失真。

一旦图片制作完毕想要更换非常复杂。

②字体图标优点

灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等

兼容性：几乎支持所有的浏览器，请放心使用

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化

18.2使用步骤：

①字体图标下载

icomoon 字库 http://icomoon.io

阿里 iconfont 字库 http://www.iconfont.cn/

②字体图标的引入

下载完毕之后，注意原先的文件不要删，后面会用。

把下载包里面的 fonts 文件夹放入页面根目录下

@font-face {
   font-family: 'icomoon';
   src:  url('fonts/icomoon.eot?7kkyc2');
   src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
     url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
     url('fonts/icomoon.woff?7kkyc2') format('woff'),
     url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }

③字体图标的追加

把压缩包里面的 selection.json（fonts/icomoon.svg功能一样）从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

19、css三角

div {
   width: 0; 
    height: 0;
    border: 50pxsolidtransparent;
    border-color: redgreenbluepink;
    line-height:0;
    font-size: 0;
 }

我们用css 边框可以模拟三角效果

宽度高度为0

我们4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了

为了照顾兼容性低版本的浏览器，加上 font-size: 0; line-height: 0;

20、css用户界面样式

20.1 鼠标样式 cursor

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

20.2轮廓线outline（去掉默认的蓝色边框）

input{outline: none;}

20.3防止拖拽文本域resize

textarea{resize: none}

21、vertical-align

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

和行内元素或行内块元素搭配使用

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

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

给图片添加 vertical-align:middle | top| bottom 等。（提倡使用的）

把图片转换为块级元素 display: block;

22、溢出文字省略号显示

22.1单行文本溢出显示省略号

  /*1. 先强制一行内显示文本*/
   white-space: nowrap;  （ 默认 normal 自动换行） 
  /*2. 超出的部分隐藏*/
   overflow: hidden;  
  /*3. 文字用省略号替代超出的部分*/
   text-overflow: ellipsis;

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

/*1. 超出的部分隐藏 */
overflow: hidden;
/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

23、布局技巧

23.1 margin负值运用

.box1,.box2,.box3,.box4{
            float: left;
            width: 100px;
            height: 100px;
            border: 10pxsolidred;
            margin-left: -10px;
        }

让每个盒子margin 往左侧移动 -10px 正好压住相邻盒子边框

鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

23.2文字围绕浮动元素

23.3行内块运用

把这些链接盒子转换为行内块，之后给父级指定 text-align:center;

利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中

24、css初始化

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: MicrosoftYaHei, HeitiSC, tahoma, arial, HiraginoSansGB, "\5B8B\4F53", sans-serif
}
body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5MicrosoftYaHei, HeitiSC, tahoma, arial, HiraginoSansGB, "\5B8B\4F53", sans-serif;
    color: #666
}
.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}
.clearfix {
    *zoom: 1
}

25、CSS写法规范：

1、布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）2、自身属性：width / height / margin / padding / border / background3、文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word4、其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

26、居中总结

text-align:center是让盒子中的内容水平居中（针对行内元素，给其父元素添加这个属性）

margin:auto是让有宽度的块级元素在父盒子中水平居中

line-hight:center是让文字在盒子中竖直居中

CSS3新特性

一、选择器

1、属性选择器

选择符	描述
E[att]	选择具有att属性的E元素
E[att=’val’]	选择具有att属性且属性值等于val的E元素
E[att^=’val’]	选择具有att属性且值以val开头的E元素
E[att$=’val’]	选择具有att属性且值以val结尾的E元素
E[att*=’val’]	选择具有att属性且值中含有val的E元素

类选择器、属性选择器、伪类选择器，权重为 10

2、结构伪类选择器

选择符	描述
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个子元素E
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

2.1、E:nth-child(n)

2n为偶数

2n+1为奇数

选择前几个孩子使用（-n+数值），选择后几个孩子使用（n+数值）

2.2、E:nth-child(n)与E:nth-of-type(n)的区别

E:nth-child(n) 匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配

E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子

3、伪元素选择器

选择符	描述
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

before 和 after 创建一个元素，但是属于行内元素

新创建的这个元素在文档树中是找不到的，所以我们称为伪元素

语法： element::before {}

before 和 after 必须有 content 属性

before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素

伪元素选择器和标签选择器一样，权重为 1

3.1、字体图标应用

<head>
    ...
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?1lv3na');
            src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?1lv3na') format('truetype'),
                url('fonts/icomoon.woff?1lv3na') format('woff'),
                url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1pxsolidred;
        }

        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            /* content: ''; */
            content: '\e91e';
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div></div>
</body>

3.2、仿土豆应用

<head>
    ...
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30pxauto;
        }

        .tudouimg {
            width: 100%;
            height: 100%;
        }

        .tudou::before {
            content: '';
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeatcenter;
        }

        /* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */
        .tudou:hover::before {
            /* 而是显示元素 */
            display: block;
        }
    </style>
</head>

<body>
    <divclass="tudou">
        <imgsrc="images/tudou.jpg"alt="">
    </div>
    <divclass="tudou">
        <imgsrc="images/tudou.jpg"alt="">
    </div>
    <divclass="tudou">
        <imgsrc="images/tudou.jpg"alt="">
    </div>
    <divclass="tudou">
        <imgsrc="images/tudou.jpg"alt="">
    </div>
</body>

3.3、清除浮动应用

双伪元素法清除浮动

伪元素法清除浮动

二、盒子模型

1、box-sizing（盒子大小）

1.1、content-box 盒子大小为 width + padding + border （以前默认的）

1.2、border-box 盒子大小为 width

padding和border不会撑大盒子（前提padding和border不会超过width宽度）

三、滤镜filter–图片变模糊

filter:blur(5px);/*blur值越大越模糊*/

四、计算盒子宽度–calc()函数

width: calc(100% – 80px);/*永远比父盒子少80px*/

括号里面可以使用 + – * / 来进行计算

五、过渡transition

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

多个属性都变化：

transition: all 花费时间

注意：过度加在本身上，谁做过渡给谁加

六、2D转换transform

1、translate位移

transform: translate(x,y)

transform: translateY(100px);/*分开写*/

transform: translateX(100px);

translate (x, y ) x 就是和 margin-left 一样， y 和 margin-top 一样

translate(100px )如果只给出一个值, 表示x轴方向移动距离， y 轴是 0

对行内元素无效

1.1、移动盒子三种做法：定位，margin，translate

transform 不会影响别的盒子，同相对定位，但是 margin-left 和 margin-top 会影响别的盒子

translate （50%， 50%）这个百分比是参照自身，margin，position参照父元素

2、rotate旋转

transform: rotate(180deg)

默认的旋转中心为center

正值为顺时针，负值为逆时针

旋转一般配合过渡使用因为旋转的特别快我们不容易看到

2.1、转换中心点transform-origin

transform-origin: x y;

x，y默认为中心（50%，50%）

x，y也可以设置像素或者方位名词

写的位置一般是写到盒子里面（不要写到hover 里面）

3、scale缩放

transform: scale(x,y)

缩放大于1 是放大，小于1 缩小

缩放的原点是盒子的最中心，不会影响其他的盒子

scale (一个值) 代表的是x和y 是一样，通常只写一个值

数值后面没有单位

4、transform复合写法

transform:translate(100px,100px) rotate(360deg);

当同时有位移和其他属性时，将位移放到最前面

七、3D转换

1、translate3d复合写法

transform:translate3d(x,y,z)

z轴（正值）越大，看到的物体就越大

2、透视perspective

想要看到3d效果，必须借助透视

透视作用：近大远小（眼睛距离屏幕的距离）

建议取值为800px~1200px，写在父元素上，（可以继承）

3、旋转rotate3d

通过左手法则围绕哪一个轴旋转就用左手握住这个轴大拇指指向正方向四指弯曲的方向就是正方向反过来就是反方向

rotateX 就用左手握住X 轴正方向此时4个手指四指弯曲的方向就是旋转正方向

围绕x轴旋转运动员拉单杠

rotateY 就用左手握住Y轴正方向此时4个手指四指弯曲的方向就是旋转正方向

围绕x轴旋转开门的效果

rotateZ 就用左手握住Z轴正方向此时4个手指四指弯曲的方向就是旋转正方向

围绕Z轴旋转转盘抽奖

4、开启3D空间：transform-style

transform-style: preserve-3d;

transform-style: preserve-3d 开启3 D空间（多个子盒子在z 轴移动的时候需要有空间距离）

4.1、transform-style: preserve-3d 和 perspective 的区别

perspective 只能实现近大远小

perspective 可以加给父盒子也可以加给他爷爷（这个可以继承）一般都是加给body 800-1200px

八、动画animation

1、制作动画的步骤

定义动画--->调用动画
/*定义动画*/
@keyframes  动画名称{
    0%{
    
    }
    100%{
    
    }
}
/*调用动画*/
animition:动画名称  持续时间
@keyframes  动画名称{
    from{
    
    }
    to{
    
    }
}

2、animation复合写法：

animation: movelinear  2s  2  alternate  forwards;

move ：动画名称（自定义）

2s 动画时长

2 重复的次数 infinite 无限循环（根本停不下来）

alternate 反向播放（默认情况下去的时候是有动画的，回来的时候是没有动画的， alternate 让回来也有动画），回来播放的动画也算动画次数

forwards 停留在动画结束的位置

简写属性不包含animation-play-state: puased;经常和鼠标经过等配合使用

3、速度曲线

animation-timing-function

值	描述
ease	默认，以低速开始，再加快，结束前又变慢
linear	匀速
steps()	指定时间函数中的间隔数量（步长）

3.1、step()使用场景：

主要是用作背景图（移动背景图使用的是什么？ background-postion ）

1 展示盒子的大小就是精灵图的宽度/ 总共的小人数

1 动画的起始位置就是 background-postion : 0 0

2 动画的结束位置 background-postion 负的背景图的大小

3 动画调用的时候按照步长进行背景图上有多少个小人就分多少步

九、背景图的大小

background-size

cover 保证盒子被完全填满但是图片可能显示不完整

contain 保证图片完整显示但是盒子有空白缝隙