知识拓展（更新中）

• web服务器

  web服务器根据在网络中所在的位置不同，又可分为本地服务器和远程服务器。

  远程服务器：我们可以将网站上传到远程服务器中，所有人都可以通过域名访问网站。

免费的远程服务器（免费空间）http://free.3v.do/

1. 去免费空间网站注册账号
2. 记录主机名，用户名，密码，域名。
3. 利用cutftp软件上传网站到远程服务器
4. 在浏览器中输入域名，即可访问我们的品优购网站了。

 

• CSS2D转换（transform）

transition: all 0.3s; 过渡写到本身上

1. 移动：translate

   transform: translate(x,y);

transform: translateX(x);

transform:translateY(y);

其最大的优点是不会影响其他盒子的位置。

相对于盒子自身的宽度和高度 transform:translate(100% 100%);

对行内标签没有效果

1. 旋转：rotate

   transform:rotate: Xdeg     transform: rotate（50deg）（顺时针旋转50度）  transform: rotate(-45deg) 逆时针旋转45度

 

    <style>

        div {

            position: relative;

            width: 249px;

 设置转换中心点

transform-origin: x,y;  transform-origin: 50% 50%

transform-origin: left bottom（左下角）

1. 缩放：scale

  transform: scale(x,y);    transform(1,2);没有单位  修改宽度没变，高度为以前的两倍。

  不影响其他盒子，可以设置缩放的中心点。

 

1. 2D转换的综合写法

   transform:  translate(50px, 100px)  scale(1.2)  rotate(180deg)

执行有顺序， 先旋转的话 再位移，位置会偏， 所以一定要先把位移放到最前面。

 

• 动画效果

1. 先用keyframes定义动画

     @keyframes 动画名称{

          0%{

Width:100px;

}

100%{

Width:200%;

}

}

可以做多个状态 keyframe 关键帧  百分比就是总时间的划分。

  0%是动画的开始，100%是动画的完成，这样的规则就是动画序列。

 

1. 再调用动画

  div{

      Width: 200px;

Height: 200px;

Background-color: aqua;

Margin:100px auto;

Animation-name: 动画名称；

Animation-duration: 持续时间；

}

   /* 始状态 */

            0% {

                transform: translate(0，0);

            }

            25% {

   动画的常见属性

 Animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态；    animation: move 2s ease 

四．3D转换

 

 

1. 3D移动 translate3d

   translform:translateX(100px) 仅在x轴上移动

   translform:translateY(100px) 仅在Y轴上移动

   translform:translateZ(100px) 仅在Z轴上移动

   translform:translate3d(x,y,z) 其中x,y,z分别指要移动的距离