No.2.1
字体图标( 目的:使用字体图标技巧实现网页中简洁的图标效果)
字体图标展示的是图标,本质是字体,处理简单的、颜色单一的图片
优点:灵活性:灵活的修改样式,例如:尺寸,颜色等
轻量级:体积小,渲染快,降低服务器请求次数
兼容性:几乎兼容所有主流浏览器
使用方便:1.下载字体包 2.使用字体图标
使用字体图标-类名:
引入字体图标样式表
平面转换(目的:使用transform属性实现元素的位移、旋转、缩放等效果)
平面转换:改变盒子在平面内的形态(位移[常用]、旋转[不常用]、缩放[常用]) 2D转换
平面转换属性:transform
位移:(使用translate实现元素位移效果)
语法:transform: translate(水平移动距离,垂直移动距离);
取值(正负即可):像素单位数值,百分比(参照物为盒子自身尺寸)注意:X轴正向为右,Y轴正向为下
技巧: translate() 如果只给出一个值,表示x轴方向移动距离 单独设置某个方向的移动距离:translateX() & translateY()
旋转:(使用translate实现元素旋转效果)(旋转效果必须配合过渡)
语法:transfrom: rotate(角度); 注意:角度单位是deg
技巧:取值正负即可(取值为正,则顺时针旋转,取值为负,则逆时针旋转)
转换圆点:(使用transform-origin属性改变转换圆点)
语法:默认圆点是盒子中心点 transform-origin: 原点水平位置 原点垂直位置;
取值:方位名词(left、top、right、bottom、center) 像素单位数值 百分比(参照盒子自身尺寸计算)
渐变背景:(使用background-image属性实现渐变背景效果)
渐变是多个颜色逐渐变化的视觉效果,一般用于设置盒子的背景
background-image: linwar-gradient(颜色1,颜色2);
随机推荐
- 【FAQ】申请Health Kit权限的常见问题及解答
华为运动健康服务(HUAWEI Health Kit)提供原子化数据开放,用户数据被授权获取后,应用可通过接口访问运动健康数据,对相关数据进行增.删.改.查等操作.这篇文章汇总了申请开通Health ...
- formly-form 动态表单
动态表单库 https://github.com/ngx-formly/ngx-formly 安装 ng add @ngx-formly/schematics --ui-theme=ng-zorro- ...
- 【开源】基于.net6+gtksharp实现的Linux下的图形界面串口调试工具
背景 22年初从上家互联网公司离职以后,充分认识到互联网行业的风险,公司在没有自身稳定产品的情况下,互联网行业就是一个烧钱的行业,支出远远大于收入来源,上家公司就是如此,12年的公司转瞬间轰然倒地,1 ...
- 一文告诉你AVM中设置字体的方法
avm 是一种简便的多端开发框架,可以开发APP.小程序.H5.今天学习了一下使用 avm 开发 APP 怎么设置字体,下面将经验分享给大家. 所需步骤: 1. 将需要使用的字体文件放到代码包r ...
- Java开发学习(四十九)----MyBatisPlus更新语句之乐观锁
1.概念 在讲解乐观锁之前,我们还是先来分析下问题: 业务并发现象带来的问题:秒杀 假如有100个商品或者票在出售,为了能保证每个商品或者票只能被一个人购买,如何保证不会出现超买或者重复卖 对于这一类 ...
- 分享一个项目中在用的图片处理工具类(图片缩放,旋转,画布格式,字节,image,bitmap转换等)
using System; using System.Collections.Generic; using System.IO; using System.Text; using System.Dra ...
- ES6 中 Promise对象使用学习
转载请注明出处: Promise 对象是 JavaScript 的异步操作解决方案,为异步操作提供统一接口.它起到代理作用(proxy),充当异步操作与回调函数之间的中介,使得异步操作具备同步操作的接 ...
- ajax补充知识点、多对多外键的三种创建方式、django内置序列化组件、批量操作数据、分页器推导思路与自定义分页器的使用、form组件
今日内容 ajax补充说明 主要是针对回调函数args接收到的响应数据 1.后端request.is_ajax() 用于判断当前请求是否由ajax发出 2.后端返回的三板斧都会被args接收不在影响整 ...
- python 第一二次教学笔记之数据操作
对Python 有一个认知 记住这是一个动态类型的,弱类型语言 ds =111.0 #弱类型 前面不用写明是具体什么类型 haobo=10 haobo = ds #类型转换不再有高低之分 hoabo ...
- angular 引入服务报错global is not defined----angular11引入service报错Can't resolve '@core/net/aa/aa.service' in 'D:\pro'
先来说第一个问题:angular 引入服务报错global is not defined 今天遇到一个问题: 我以为是代码问题,排查很久没找到问题所在 angular 引入服务报错global is ...