携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情
17.搜索引擎优化方法补充
\
在h1标签的a中添加网站名，然后添加背景图并且把字体大小设置为0
18转换
18.1 2D转换
18.1.1平移translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
语法：
transform:translate（x，y）；或者分开写
transform:translateX（n）；
transform:translateY（n）；
重点：
1.定义2D转换中的移动，沿着X和Y轴移动元素
2.translate最大的优点：不会影响到其他元素的位置
3.translate中的百分比单位是相对于自身元素的translate:（50%，50%）；
4.对行内标签没有效果
18.1.2 旋转rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
语法：
transform:rotate（度数）
注意：
rotate里面跟度数，单位是deg 比如rotate（45deg）
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点
18.1.3转换中心点transform-origin
语法：
transform-origin: x y；
重点：
注意后面的参数x和y用空格隔开
xy默认转换的中心点是元素的中心点（50%50%）
还可以给xy设置像素或者方位名词（top bottom left right center）
18.2 2D转换连写
注意：
1.同时使用多个转换，其格式为：transform:translate0rotate）scale0.等，
2.其顺序会影转换的效果。（先旋转会改变坐标轴方向）
3.当我们同时有位移和其他属性的时候，记得要将位移放到最前
18.1.4 缩放scale
语法：
transform:scale(x,y);
注意：
注意其中的x和y用逗号分隔
transform:scale（1，1）：宽和高都放大一倍，相对于没有放大
transform:scale（2.2）：宽和高都放大了2倍
transform:scale（2）：只写一个参数，第二个参数则和第一个参数一样，相当于scale（2，2）
transform:scale（0.5，0.5）：缩小sacle
缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
18.2动画
动画（animation） 是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
18.2.1动画的基本使用
制作动画分两步
1、定义动画
2、再使用（调用）动画
如：
1、用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称{
0%{
width：100px；
}
100%{
width：200px；
}
}
2、元素使用动画
div{
width：200px；
height：200px；
background-color:aqua；
margin：100px auto；
/*调用动画*/
animation-name：动画名称；
/*持续时间*/w
animation-duration：持续时间；
}
动画序列
·0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
·在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
·动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
·请用百分比来规定变化发生的时间，或用关键词“from"和“to”，等同于0%和100%。
18.2.2动画常见属性
18.2.3动画简写属性
格式：
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态；
如
animation:myfirst 5s linear 2s infinite alternate;
重点：
简写属性里面不包含animation-play-state
暂停动画：animation olay-state:puased；经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来：animation-direction:alternate
盒子动画结束后，停在结束位置：animation-fill-mode:forward
19. 3D转换
x轴：水平向右 注意：X右边是正值，左边是负值
y轴：垂直向下 注意：y下面是正值，上面是负值
z轴：垂直屏幕 注意：往外面是正值，往里面是负值
19.3.1 3D移动translate3d
translform:translateX（100px）：仅仅是在x轴上移动
translform:translateY（100px）：仅仅是在Y轴上移动
translform:translateZ（100px）：仅仅是在Z轴上移动（注意：translateZ一般用px单位）
transform:translate3d（x，y，z）：其中x、y、z分别指要移动的轴的方向的距离
19.3.2 透视perspective
透视写在被观察元素的父盒子上面的
d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z：就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。
19.4 3D旋转rotate3d
3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。
语法
·transform:rotateX（45deg）：沿着x轴正方向旋转45度
·transform:rotateY（45deg）：沿看y轴正方向旋转45deg
·transform:rotateZ（45deg）：沿着Z轴正方向旋转45deg
·transform:rotate3d（x，y，z，deg）：沿着自定义轴旋转deg为角度（了解即可）
元素旋转方向的判断：
左手准则
左手的拇指指向x轴的正方向
其余手指的弯曲方向就是该元素沿着x轴旋转的方向
19.5 3D transfrom-style
控制子元素是否开启三维立体环境
transform-style:flat子元素不开启3d立体空间 默认的
transform-style:preserve-3d； 子元素开启立体空间
代码写给父级，但是影响的是子盒子
这个属性很重要，后面必用
20 浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加
-moz-:代表firefox浏览器私有属性
-ms-：代表ie浏览器私有属性
-webkit-：代表Safari、chrome私有属性
-o-：代表opera私有属性
提倡的写法:
-moz-border-radius:10px;
-webit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
