今日总结

移动端第一天

一,字体图标的的引用方式

1创建一个新浪微博账号或者GitHub账号登入iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/

​

 2,搜索你自己需要的字体图标(比如我们搜一个购物车)就会出现如下:

​

 选择自己所需要的一个将它添加购物车中,在然后将其添加到我们的项目中

3,点击下载到本地,将其解压下来,里面有如下文件

​

 然后我们新建一个文件夹叫fonts,将(iconfont.ttf   iconfont.woff   iconfont.woff2   iconfont.css)这四个文件复制到我们新建的文件fonts中

3,将fonts拖到我们vscode上,我们在建一个HTML文件来引用他比如( <link rel="stylesheet" href="./fonts/iconfont.css">)

代码引用:

​

 我们要选择字体图标里面的类名iconfont 然后在引用你所需要的图标类名比如 上面的购物车类名icon-icon-test1

二,变形transform

它有三个属性分别是(位移,旋转,缩放)

位移translate

translate可以让盒子沿着X轴y轴移动

语法:

transform: translate(x, y);

transform: translateX(x);

transform: translateY(y);

代码:

开门效果

 

注意:行内元素无法位移

 旋转rotate

可以是盒子旋转角度

语法:

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

如果是正数则是顺时针旋转

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

设置中心点transform-origin

 transform-origin: right bottom;

多形态变形小技巧

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

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

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

缩放 scale

语法：

transform: scale(1.2)；

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

渐变

基本语法： background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))