移动web

移动web第一天

一，字体图标

1.使用字体图标（重点）

引入相关文件（前提）

（1），复制相关的文件到fonts文件夹里面

（2），引入css

<link rel="stylesheet" href="./fonts/iconfont.css">

2.使用类名引入字体图标

如果是一个标签来使用字体文件，可以采取2个类名的形式。

<span class="iconfont icon-daohangdizhi"></span>

第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。

第二个类名 icon-daohangdizhi， 告诉盒子到底使用哪个小图标。

3.使用unicode编码（了解）

直接在标签内部放入一个编码

 <strong class='iconfont'> &#xe8ab; </strong>

css 要指定当前标签的文字是字体图标，必须要声明。

strong {
      font-family: 'iconfont';
}

4.使用伪元素字体图标(记住)

<div class="car1 iconfont">购物车</div>

.car {
      width: 200px;
      height: 45px;
      border: 1px solid pink;
      text-align: center;
      line-height: 45px;
      font-family: 'iconfont';
    }
.car::before {
    content: "\e63b";

}
.car::after {
    content: "\e686";
}

注意： 使用伪元素字体图标，一定要声明字体。 font-family: "iconfont"

5.小结

字体图标是前端工程师必须具备的知识点。 开发中， 字体图标上传，选择，都是网页美工给我们准备好了。

我们重点是下载和使用。

字体图标使用可以整体分为两大步骤：

（1）引用线上地址即可。

<link rel="stylesheet" href="http://at.alicdn.com/t/font_3234864_h0da2uig6lr.css">

（2）调用。

开发中最常用的是使用类名来调用，所以重点记住这个就可以了。

<span class="iconfont icon-daohangdizhi"></span>

二 变形 transform（2D）

变形可以改变盒子在平面的状态（位移，旋转，缩放，倾斜等等）

位移 translate

translate可以让盒子沿着X轴或者Y轴移动

语法：

transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);

问题：

1，他和margin有啥区别？

（1）margin移动盒子会影响其他盒子，把别的盒子挤走

（2）位移translate移动盒子不会影响其他盒子。不脱标

（3）位移经常需要的场景：

比如 盒子上下移动不影响其他盒子

盒子水平垂直居中，写法简单

轮播图的动画效果

注意：
移动的时候可以写百分比，如果使用百分比，移动的是盒子自身的宽度

transform: translateX(100%);

应用-盒子水平和垂直

可以让一个子盒子在父盒子里面水平和垂直居中

让不固定宽度和高度的盒子居中

方法一：子绝父相+2d位移

方法二：子绝父相+margin：0 auto；

让固定宽度和高度的盒子居中

方法：子绝父相+margin

 .father {
            position: relative;
            width: 600px;
            height: 600px;
            background-color: pink;
        }
.inner {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      background-color: skyblue;
      transform: translate(-50%, -50%);
    }

旋转 rotate

旋转可以让盒子旋转角度。

语法：

transform: rotate(45deg); turn 一定要写定位

如果是正度数，是顺时针旋转

如果是负度数， 则是逆时针旋转

设置中心点 transform-origin

设置旋转的中心点位置

transform-origin: right bottom;

多形态变形小技巧

1，如果需要移动，也需要旋转，则一定要先写移动，后写旋转，css属性的书写顺序影响代码的执行。

transform：translate(-50%, -50%) rotate(360deg);

2，注意，多个值用空格隔开。

缩放 scale

语法：

transform:scale(1.5);

他比宽度和高度最大的优势：他是用中心点来进行缩放，同样他不会影响其他盒子。

倾斜skew

transform:skew(-50deg);

注意点：倾斜里面的单位也是deg，往左倾斜是负值，往右倾斜是正值
尽量不要超过90deg，不然就看不到

三，渐变

渐变色是由多个颜色组成的

线性渐变（了解）

语法：

background-image: linear-gradient(to top, yellow, red, green, pink);

注意点：多个颜色用逗号隔开，默认是从上往下进行渐变
渐变色的第一个属性是方向 to属性 方位名词（top上，bottom下，left左，right右）

移动web第二天

一，空间转换 3D

3D坐标系

3D坐标系比2D多一个Z轴。

3个坐标轴取值的正反：

X轴往右越大，是正值，否则反之

Y轴往下越大，是正值，否则反之

Z轴 （指向我们）越大，是正值，否则反之

3D位移

综合写法：

transform: translate3d(x, y, z);

单独写法：

transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px);

透视

透视的作用：空间转换的时，为元素添加近大远小，近实远虚的视觉效果

语法：

perspective:800px;

透视注意事项：

1，取值范围经常在800-1200px之间。

2，一定给父元素添加

3，透视距离也称之为视距，所谓的视距结束人的眼睛到屏幕的距离。

视距越大:盒子越来越小

视距越小:盒子越来越大

3D旋转

有了透视的加持，我们3D旋转的效果会比较明显。

rotateX

transform:rotateX(180deg);

x轴上下旋转 单位deg或turn 正值从下往上 负值从上往下

rotateY

transform:rotateY(180deg);

y轴左右旋转 正值从左往右 负值从右往左旋转

rotateZ

transform:rotateZ()180deg;

z轴转圈 正值顺时针旋转 负值逆时针旋转

3d旋转的综合写法rotate3d(x, y, z, 角度) xyz为0-1 0表示不旋转 1表示旋转

综合写法：

transform: rotate3d(1, 1, 1, 180deg);

左手法则

如果清除清楚X轴和Y轴是如何旋转的，旋转的度数是正值还是负值

规则：

1，大拇指指向X轴正方向（右），则四指指向的方向是旋转的方向

2，大拇指指向Y轴正方向（下），则四指指向的方向是旋转的方向

立体呈现

让子盒子在父盒子内有空间的展示，此时可以给父盒子添加

 transform-style: preserve-3d;

二，动画（重点）

动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

1，定义：

/* 1. 定义的动画 */
@keyframes dance {

    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.5)
    }
}

或者是

 /* 1. 定义的动画 */
    @keyframes dance {

       0% {
        transform: scale(1)
      } 

      100% {
        transform: scale(1.5)
      }
    }

2，调用

img {
    width: 200px;
    /* 2. 使用动画  animation: 动画名称 执行时间;   infinite 循环*/
    animation: dance .5s infinite;
}

动画属性

1. 动画名字参照css类选择器命名

2. 动画时长和延迟时间别忘了带单位 s

3. infinate 无限循环动画（重复次数）

4. alternate 为反向 就是左右来回执行动画（跑马灯）

5. forwards 动画结束停留在最后一帧状态， 不循环状态使用

6. linear 让动画匀速执行

注意点：动画的结束状态无法和动画的重复次数以及动画的方向一起使用

鼠标经过暂停动画

语法：

 animation-play-state: paused;

多组动画

语法：

/* 我们想要2个动画一起执行  animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;