一、iconfont图标使用步骤
1.打开阿里巴巴矢量图标库,查找自己需要的图标。
2.点击下载,添加至项目
3.两种方法:下载至本地、生成线上链接(注意在生成链接后前面添加http:)
4.下载至本地后解压该文件,在文件中link引入iconfont.css文件
5.使用方法
<i class="iconfont xxx"></i>
iconfont图标上传图标使用
需求:图片必须为svg格式的图片
二、平面转换 (transform)
使用transform属性实现盒子在平面内的位移、旋转、缩放
平面坐标轴:x轴(向右)、y轴(向下)
注意:配合过渡属性进行使用
一、位移
transform: translate(水平移动距离,垂直移动距离)
注意:逗号隔开,若只设置一个值,则表示X轴的值
取值方式:数字+px 百分比(相对于自身的宽高)
单独设置朝一边位移:
transform:translateX(100px); transform:translateY(100px); //X和Y需要大写
水平垂直居中实现方式(面试)
div{ position:absolute; top:50%;//相对于父元素移动50% left:50%; transform:translate(-50%,-50%)//相对于自身宽高移动50% }
双开门马萨拉蒂案例