字体图标

优点：

灵活性：灵活的修改尺寸，“颜色，尺寸”

轻量级：字体小渲染快，降低服务器请求

兼容性：几乎兼容所有主流浏览器

图标库：Iconfont：www.iconfont.cn

操作：登录新浪微博账号-选择图库-添加购物车-在右侧边栏选择添加项目-点击我的项目-点下载（得到一个压缩包文件）

引入路劲：

<link rel*="stylesheet"href*="../iconfont/iconfont.css">
复制代码

使用方法：

1.font-family：’iconfont’ 样式一定要写

2.font-class行内元素：必须加上两个类名 iconfont icon-xxxxxx

<head>
    /*<style>
        span {
            font-family: 'iconfont';
            color: blue;
            font-size: 50px;
        }*/
    </style>
</head>

<body>
    /*unicode方法*/
    <span>&#xe98e;</span>
    /*类名 两个类名*/
    <span iconfont icon-xxx></span>
</body>
复制代码

在线路径：加载慢的话，路径前面添加http：协议

伪元素引入：

：：befer

：：after

content：‘/xxx’

font-family:“iconfont”

svg生成图标

svg上传与下载（记住）

上传-进网站-修改样式（颜色）-加入购物车-下载

font-class实现原理

transform平面转换

1.改变盒子在平面的形态（2d转换）

值：

位移

transform:translate(X,Y);

使用百分比值，相对于自身的百分比
使用像素

注意：x正向为右，y正向为下

样式：

1.百分比

2.像素

写法：

transform：translate（x，y）；

transform：translateX（x）；

transform：translateY（y）；

样式：

旋转

语法：

transfrom：rotate（xxdeg）；

单位：deg

顺时针：正值

逆时针：负值

样式：

旋转中心点

transform：origin：值；

方位名词（left top right bottom）
像素（0px 0px）
百分比单位（100% 100%）相对于自身尺寸

样式：

transform复合写法

值：

transfrom：translate（x，y） rotate（xxdeg）

注意：当我们要实现多种转换效果的时候

不能写多行transform 错误！！被层叠

当位移和旋转共同出现的时候：

先位移后旋转
先旋转后位移
以上两种效果不一样
原因：

先旋转的时候物体在旋转的时候坐标系也跟着旋转

建议：先位移再旋转

代码样式：

缩放

transform：scale（x轴缩放倍数，y轴缩放倍数）

注意：通常只写一个值（数字）

样式：

透明

opacity：0；（透明）

opacity：1；（不透明）

支点

单闭合标签不支持伪元素，如img，input

渐变

backguound-image

渐变是多个颜色初见变化的视觉效果
一般用于设置盒子的背景

值：

linear-gradient（black，red）

可以设置多种渐变颜色

分层渐变效果：

0%–30% black
30%–50% black–red
50%–80% red–blue
80%–100% blue

渐变方向

方位名词：

默认值 to bottom 从上到下
下到上 to top
度数（deg）

linear-gradient(线性渐变)

opacity

透明度

透明色

transparent

提升权重

z-index：数字

3d转换

transform：translated（x，y，z）

透视

一般给body 或者父元素添加

perspective

值：

数字+像素

开启立体空间

可以设置一个标签是普通的平面图形还是立体空间容器

transform-style

值：

transform-style：preserve-3d

默认值：flat

动画

动画基本属性

动画的复合写法

    单个讲解属性 

   动画的名称 
    animation-name: ani_1;
    动画的持续时间 
    animation-duration: 2s;
  动画的延迟时间 
     animation-delay: 3s; 
     
    动画正常播放之外的状态（延迟、播放结束） 
    在延迟的时间内  
    1 显示的是 自身的颜色 属性 
    2 设置  在延迟的时间内 显示 0% 画面  backwards
    3 整个动画播放完毕了 动画 停留在最后一帧的画面 还是回到 自身的属性 画面上 
      设置动画 播放完毕了 停留在 最后一帧画面   forwards

    4 both  
      同时设置了  backwards 和  forwards
复制代码

animation-fill-mode: both;

设置动画的播放次数 2

animation-iteration-count: infinite;

设置动画的播放的方向 animation-direction

1 默认值 normal 先正再正常用
2 alternate 先正再反常用
3 reverse 先反再反
4 alternate-reverse 先反再正

animation-direction: alternate-reverse;
}

设置动画：

跑马图：

1 静态 html结构
box 显示边框里面大的div 存放多个小图片后期移动的时候只移动装着小图片的盒子就行

2 动态效果
1 inner盒子从右往左移动

3 无缝滚动技巧
1 两个大盒子
1 外层盒子设置眼看宽度和高度
2 里层盒子用来存放多张图片（里面要存放多少张图片设置宽度为多少！！）
2 真实存放的图片张数比实际的要多
1 多多少看你一下的外层盒子能装几张（浮动）
3 设置动画
1 设置内层盒子的位移等于真实的那几张图片的位移！
2 设置动画无线滚动！！
–>

过渡

transtion

移动端

视口标签：

meta name=”viewport”
content=”width=device-width, initial-scale=1.0,user-scalable=no, maximum-scale=1.0,minimum-scalable=1.0″

理想视口的参数详解：
meta标签用来描述或设置一个HTML网页文档的属性
content 要设置或者描述的内容
width 设置视口的宽度 device-width等于屏幕的宽度
initial-scale 页面打开的时候视口放大的倍数
user-scalable 是否允许用户缩放页面
maximum-scale 如果允许放大的话最大放大多少倍
minimum-scale 如果允许放大的话最小放大多少倍

工作用法：

1.直接vscode生成

2.快捷键

meta：vp+tab

3.看别的公司网站复制

移动端手机屏幕常识

实际开发中，如果没有特别的要求，我们就不需要使用 srcset 或者 image-set 技术

移动端布局跟pc端区别

1.pc端

（1）.定版心

（2）.页面中

2.移动端

（1）.不会定版心

（2）.元素的大小很少使用px单位都会使用相对长度百分比单位（rem）（vw）（vh）屏幕越大，元素越大。

（3）.早期移动端布局，百分比布局，也叫流式布局。

（4）.早期布局方案弊端

（5）.不够方便，一旦增加了元素的方式，相对应的width的代码需要重新去计算。

（6）.主流的移动端布局方案

（7）.flex！！！好用简单方便，一定要牢牢记住它！！！！！！

流式布局（百分比布局）

flex布局display：flex；

1.设置div 变成 flex 盒子弹性flex

display：flex；

2.div中的子元素发生一些改变

（1）.设置了flex的盒子称之为父项

（2）.盒子的子元素称之为子项

3.具体变化

1.不在区分什么块级元素和行内元素

2.子项默认的宽度和高度

宽度由内容撑开

高度等于父项

3.子项

（1）使用浮动没有效果

（2）使用定位，margin，transform都有效

（3）默认情况下子项总宽度大于父项的宽也不会换行！！！

（4）fiex不会换行

只会压缩自身的宽度而已

flex布局主轴侧轴

1.主轴 = x轴 =水平方向默认主轴 x轴

2.测轴 = y轴 = 垂直方向

主轴对齐方式：justif-content（x轴）

justif_content：

值：

主轴对齐方式

1.左对齐 flex-start

2.右对齐 flex-end

3.居中对齐 flex-center

4.先两侧对齐，后间隔均匀分开 space-between

5.间隔存放 space-around （两侧空间小于中间空间）

6.绝对平均 space-evenly（元素之间的空隙绝对平均）

侧轴的对齐方式-单行：align-items（Y轴）

侧轴对齐（设置元素上下的位置） align-items：

值：

1.flex-start 上对齐

2.flex-end 下对齐

3.center 垂直居中

元素侧轴（y轴）-多行对齐方式align-content

align-content：

值：

flex-statr

flex-end

flex-conter

space-between

space-around

space-exenly

flex布局水平垂直居中

justify-content：center；

align-items：center；

flex换行属性

默认情况下

1.flex不会换行的！！

当子元素总宽度大于父元素的时候不会换行

只会挤压子元素的宽度

2.设置换行属性

flex-wrap

（1）nowrap 默认不换行

（2）wrap 换行

修改主轴方向flex-direction

1.row 默认值水平方向从左到右少用

2.row- reverse 从右到左少用了解

3.column 从上到下

4.column-recerse 从上到下少用了解

设置子项均分父项的宽

flex:1;

flex布局文本居中

单独设置子项（子项占父项剩余的空间）

文章版权归作者所有，未经允许请勿转载。

THE END

前端

Android 音视频开发【特效篇】【一】抖音传送带特效 ｜ 8月更文挑战

别再说概念了！直接告诉我这些常用正则表达式是怎么写出来的行不行？

集群时钟同步问题

jgbbs ‘bbs.mdb’ 信息泄露漏洞

ThreeJS OIT Weight

Fetchmail 拒绝服务漏洞

字体图标，2D转换，3D动画，渐变，跑马图讲解，移动端媒体查询，flex布局