精灵图、矢量图使用

334 阅读1分钟

移动web第一天

1.文字图标-优点

能够灵活修改样式、体积小、兼容主流浏览器

2.uicode的使用

1647223936573.png

3.font-class的使用

两个类名

1647223999887.png

4.svg上传与使用

登入网址www.iconfont.cn/,点击上传,将矢量图上…

1647227403372.png

1647227429047.png

5.平面转换

1.位移

①百分比是自身的尺寸的百分比

1647239928656.png ②平移位移通过自身尺寸进行变化,不随父级长宽变化产生影响

2.旋转 ①图片旋转需要将图片显示模式转为 块元素 1647270348017.png 3.旋转原点 tranform-origin:方位名词 像素 百分比,旋转transform-ratate,度数代码deg 1647270526679.png 4.平移和旋转多重转换

①注意先平移再旋转:因为先旋转会改变坐标轴,导致平移出错(参考滚轮案例) 1647270662795.png 5.缩放 transform-scale,数值写倍数,不需要单位

另外,加overf:hidden防止图片溢出 1647270727748.png

6.背景渐变 1647270884461.png

1647270900409.png