8.CSS3 2D转换 转换(transform) ：是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
transform:translate(x,y) ：改变元素在页中的位置，类似定位 /* 移动盒子的位置：定位 position、盒子外边距、2d转换 */ div { width: 200px; height: 200px; background-color: pink; /* 通过x 、y的数值大小移动 只移动一个方向另一个数值写0 */ transform: translate(100px, 0); transform: translateX(100px); } 注意： 1.translate最大的优点：不会影响到其他元素的位置 2.translate中的百分比单位是相对于盒子自身元素的高度宽度 3.对行内标签没有效果 4.盒子居中 translate（50%，50%） div { position: relative; } p { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } transform:rotate(度数 deg) :2D旋转，就是让元素在2维平面内顺时针或逆时针旋转 img { transform: rotate(180deg); } 注意： 1.顺时针度数为正，逆时针为负 2.默认旋转的中心点是元素的中心点，想要其他的可以设置中心点 transform-origin: x y; :设置元素转换的中心点 <style> div { width: 200px; height: 200px; background-color: pink; margin: 100px auto; transition: all 1s; transform-origin: left bottom; } div:hover { transform: rotate(360deg); } </style> 注意： 1.xy之间用空格隔开 2.x y默认转换的中心点是元素的中心点（50%，50%） 3. 还可以给x y设置 像素 或者 方位名词 （top，center...） transform：scale（x,y） ：缩放高度和宽度 <style> div { width: 200px; height: 200px; background-color: pink; margin: 100px auto; } /* scale的优势不会影响其他盒子 而且可以改变缩放的中心点 直接修改高度和宽度 会影响其他盒子的位置 */ div:hover { transform: scale(1, 2); } </style> 注意： 1.x y用逗号隔开 数字不跟单位 2.transform：scale（1,1）：宽度高度放大一倍 等于没放大 3.transform：scale（2） 只写了一个参数 相当于第二个参数和第一个一样 即scale（2,2） 4.transform：scale（.5,.5）:缩小 5.transform：scale（2,1）就只放大宽度 6.默认以中心点缩放，可以设置转换中心点缩放2D转换综合写法：
div { transform: translate() rotate() scale(); } 注意： 1.顺序会影响转换的效果 （先旋转会改变坐标轴的方向） 2.当我们有位移和其他属性的时候，记得要将位移放到最前面2D转换总结：
转换transform有2D和3D之分2D移动translate(x,y)最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的可以分开写比如translateX(x)和translateY(y)2D旋转rotate(度数)可以实现旋转元素度数的单位是deg2D缩放sacle(x,y)里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子设置转换中心点transform-origin : x y;参数可以百分比、像素或者是方位名词当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前动画(animation )是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。 分为两步： 1.定义动画 2.调用动画
动画序列
0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
在 @keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词"from"和"to”，等同于0%和100%。
注意： 1.可以做多个状态的变化 keyframe-关键帧 2.百分比必须是整数 <style> @keyframes move { /* 开始状态 */ 0% { transform: translate(0); } 25% { transform: translateX(1000px); } 50% { transform: translate(1000px, 500px); } /* 结束状态 */ 75% { transform: translate(0, 500px); } 100% { transform: translate(0); } } div { width: 200px; height: 200px; background-color: pink; /* 动画名 */ animation-name: move; /* 持续时间 */ animation-duration: 10s; } </style>动画常用属性：
<style> div { width: 200px; height: 200px; background-color: pink; /* 动画名 */ animation-name: move; /* 持续时间 */ animation-duration: 4s; /* 运动曲线 */ animation-timing-function: ease; /* 何时开始 */ animation-delay: 1s; /* 重复次数 默认是1 infinite无限 */ animation-iteration-count: infinite; /* 是否反方向播放 默认normal 如果要反方向就用alternate*/ animation-direction: alternate; /* 动画结束后的状态 默认的是 backwards 回到起始状态 我们可以让他停留在结束状态 forwards */ animation-fill-mode: forwards; } div:hover { /* 鼠标经过div 就停止动画 */ animation-play-state: paused; }速度曲线细节：
动画属性简写：
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态 /* 前面两个属性name duration一定要写 linear是匀速 默认的可以省略*/ animation: move 5s linear 2s infinite alternate; 注意： 1.简写属性里面不包含 animation-play-state 2.暂停动画（pause）经常和鼠标经过等其他配合使用 3.想要动画走回来，而不是直接跳回来用： animation-direction：alternate 4.盒子动画结束后，停在结束为止， animation-fill-mode：forward案例1： 圆点处有3段波纹的动画效果
<!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> .map { position: relative; width: 747px; height: 616px; background: url(image/map.png) black no-repeat; margin: 0 auto; } .city { position: absolute; top: 227px; right: 193px; } .dotted { width: 8px; height: 8px; background-color: skyblue; border-radius: 50%; } .city div[class^="pulse"] { /*保证小波纹在父盒子里面水平居中 放大之后就会中心向四周发散*/ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 12px #009dfd; animation: pulse 1.2s linear infinite; } .city div.pulse2 { animation-delay: 0.4s; } .city div.pulse3 { animation-delay: 0.8s; } @keyframes pulse { 0% { } 70% { /* 此处不用transform：scale 因为会让阴影也变大 */ width: 40px; height: 40px; /* opacity: 代表不透明度 越小越透明 */ opacity: 1; } 100% { width: 70px; height: 70px; opacity: 0; } } </style> </head> <body> <div class="map"> <div class="city"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div> </div> </div> </body> </html>案例2： 奔跑的小熊（跑到中间停下来）
通过steps定义8个步数，盒子只要恰好能装下每个熊的状态 通过动画无限循环就能实现小熊奔跑
<!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> body { background-color: #ccc; } div { position: absolute; width: 200px; height: 100px; background: url(image/bear.png) no-repeat; /*调用多个动画，只需在前一个动画后加逗号继续写就行*/ animation: bear 1s steps(8) infinite, move 3s forwards; } @keyframes bear { 0% { background-position: 0 0; } 100% { background-position: -1600px 0; } } @keyframes move { 0% { left: 0; } 100% { left: 50%; transform: translateX(-50%); } } </style> </head> <body> <div></div> </body> </html>服务器（我们也会称之为主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器等。
Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，也可以放置网站文件，让全世界浏览;可以放置数据文件，让全世界下载。
服务器根据在网络位置中的不同可以分为本地服务器和远程服务器 本地服务器： 将自己电脑设置为本地服务器，这样同一个局域网内的用户就可以访问你的网站 远程服务器： 别的公司为我们提供一台主机，我们只要把项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了
