前端字体图标,2D变形,以及渐变的使用
一、字体图标
下载字体图标(了解)
字体图标的 选择,上传 UI美工她们来做的,我们了解即可。
使用字体图标(重点)
引入相关文件(前提)
复制相关的文件,到 fonts文件夹里面。
引入 css
<linkrel="stylesheet"href="./fonts/iconfont.css">
使用类名引入字体图标(重点记住)
如果是一个标签来使用字体文件,可以采取2个类名的形式。(开发最常用)
<spanclass="iconfont icon-daohangdizhi"></span>
第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。
第二个类名 icon-daohangdizhi, 告诉盒子到底使用哪个小图标。
使用unicode编码(了解)
也可以直接在标签内部放入一个编码
html标签
<strong> </strong>
css 要指定当前标签的文字是字体图标,必须要声明。
strong {
font-family: 'iconfont';
}
使用伪元素字体图标(记住)
<divclass="car1">购物车</div>
这样结构比较的清晰,省了很多的小盒子
.car {
width: 200px;
height: 45px;
border: 1pxsolidpink;
text-align: center;
line-height: 45px;
font-family: 'iconfont';
}
.car::before {
content: "\e63b";
}
.car::after {
content: "\e686";
}
注意: 使用伪元素字体图标,一定要声明字体。 font-family: "iconfont"
小结
字体图标是前端工程师必须具备的知识点。 开发中, 字体图标上传,选择,都是网页美工给我们准备好了。
我们重点是下载和使用。
字体图标使用可以整体分为两大步骤:
引用线上地址即可。
<linkrel="stylesheet"href="" target="_blank">http://at.alicdn.com/t/font_3234864_h0da2uig6lr.css">
调用。
开发中最常用的是使用类名来调用,所以重点记住这个就可以了。
<spanclass="iconfont icon-daohangdizhi"></span>
二、变形 transform(2D)
变形可以改变盒子在平面内的形态(位移、旋转、缩放,倾斜等等)
位移 translate
translate可以让盒子沿着x轴或者y轴来移动。
语法:
transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);
问题:
他和margin有啥区别。
margin移动盒子会影响其余的盒子。把其他人挤走。
位移translate移动盒子不会影响其他的盒子。不脱标。
位移经常需要的场景:
比如 盒子上下移动不影响其他盒子
盒子水平和垂直居中,写法简单
轮播图的动画效果
注意:
移动的时候可以写百分比,如果使用的百分比,移动的是盒子自身的宽度
transform: translateX(100%);
应用- 盒子水平和垂直
可以让一个子盒子在父盒子里面水平和垂直居中。
.inner {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: skyblue;
transform: translate(-50%, -50%);
}
/* .inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
background-color: skyblue;
} */
旋转 rotate
旋转可以让盒子旋转角度。
语法:
transform: rotate(45deg); 一定写单位
如果是正度数,则是顺时针旋转
如果是负度数,则是逆时针旋转
设置中心点 transform-origin
/* 设置旋转的中心点位置 */
transform-origin: rightbottom;
多形态变形小技巧
如果需要移动,也需要旋转,则一定先写移动,后写旋转, css属性书写顺序影响代码执行。
transform: translate(-50%, -50%) rotate(360deg);
注意,多个值之前用 空格隔开。
缩放 scale
语法:
transform: scale(1.5);
它比这宽度和高度最大的优势: 他是用中心点来进行缩放的,同样他不会影响其他的盒子。
案例:
和平精英
倾斜skew
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 400px;
height: 400px;
background-color: pink;
margin: 100pxauto;
/* 倾斜里面也是deg 往左倾斜是负值 往右是正值 尽量不要超过90deg,不然就看不到*/
transform: skew(-50deg);
}
</style>
</head>
<body>
<divclass="box"></div>
</body>
</html>
三、渐变
线性渐变(了解)
基本语法:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 400px;
height: 400px;
/* 多个颜色使用逗号隔开 默认是从上到下进行渐变*/
/* 渐变色的第一个属性是方向 to属性 方位名词(top上,bottom下,left左,right右)*/
background-image: linear-gradient(totop, yellow, red, green, pink);
/* 第一个值写 角度deg */
/* background-image: linear-gradient(45deg, yellow, red, green, pink); */
/* 我们的经常使用方式 黑色半透明 transparent, rgba(0, 0, 0, 0.5) 白色半透明transparent, rgba(255, 255, 255, 0.5)*/
/* background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5)); */
}
</style>
</head>
<body>
<!-- 渐变色是由多个颜色组成 -->
<divclass="box"></div>
</body>
</html>
/* 注意渐变色有多种写法,不用去记,后面UI小姐姐会告诉你 */
前端字体图标,2D变形,以及渐变的使用相关推荐
- 前端字体图标的使用总结
有时候我们业务中会遇到需要字体图标的场景比如同一个图标在不同的地方显示不同的颜色,这个时候使用字体图标就很适合,这个场景我遇到了好几次. 使用字体图标的两种方式: 1.让设计给出图标的svg文件,上传 ...
- 前端字体图标的使用(阿里、icomoon)
阿里字体图标使用 首先去阿里图标库官网:http://www.iconfont.cn/ 搜索需要的图标库 -->加入购物车-->点击购物车-->添加到项目(如果有项目直接加入需要的项 ...
- web前端字体图标下载
icomoon字库icmoon字库 阿里iconfont字库阿里iconfont字库 使用方法https://www.bilibili.com/video/BV1pE411q7FU?p=256 ![在 ...
- 字体图标,变形,及渐变
一.字体图标 下载字体图标(了解) 字体图标的 选择,上传 UI美工她们来做的,我们了解即可. 具体的步骤: 使用字体图标(重点) 引入相关文件(前提) 复制相关的文件,到 fonts文件夹里面. 引 ...
- 字体图标,渐变,变形
字体图标的引用方式:[一般用i引用] 1.类引用 首先要link引入字体图标样式表.css文件,然后两个类名 第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标. 不是普通的文字. ...
- 移动WEB学习 - 字体图标、平面转换、渐变
一.字体图标 目标:使用字体图标技巧实现网页中简介的图标效果 字体图标的优点: 灵活性:灵活的修改样式,例如:尺寸.颜色等 轻量级:体积小,渲染快.降低服务器请求次数 兼容性:几乎兼容所有主流浏览器 ...
- 使用 IcoMoon 生成字体图标,并在微前端项目中使用
目录 1. IcoMoon 使用步骤 1.1 进入 IcoMoon 新建图集 1.2 选择并生成字体图标 1.3 使用字体图标文件 2. 微前端中实现换肤的一种思路 2.1 使用 CSS 变量 2.2 ...
- 从零开始学前端:字体图标的引入 --- 今天你学习了吗?(CSS:Day18)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:定位 - 今天你学习了吗?(CSS:Day17) 文章目录 从零开始学前端:程序猿小白也可以完全掌握!-今 ...
- 【前端学习之HTMLCSS进阶篇】-- CSS第一篇 -- @规则与web字体图标
[前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标 文章目录 [前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标 前言 一. ...
最新文章
- JQuery 动态创建表单,并自动提交
- #ifdef __cplusplus extern C { #endif”的定义的含义
- golang中的pprof支持
- 防火墙(16)——SNAT和DNAT,DNAT实践
- Unix基本系统数据类型和stat结构体
- 【学习笔记】结合代码理解设计模式 —— 代理模式(静态代理、动态代理、延伸)
- 设计模式视频教程——【从设计到模式】
- Process 获取子进程输入流、杀死子进程
- POJ1328(贪心)题解
- 花空流水去,过往皆云烟
- springboot + rabbitmq 做智能家居,我也没想到会这么简单
- new和delete的底层实现原理
- 品牌和爱情,原理是一样的
- IP数据报首部的格式identification
- 大学cad课要用计算机么,cad2010大学课程
- 销售凭证、客户主数据相关表
- 计算机内部信号表现形式,信号是数据在传输过程中的什么的表现形式
- mysql怎么创建出生日期表_如何在MySQL中从出生日期开始生成数字序列
- 获取联想锁屏壁纸(超简单两个方法)
- kernel:driver_learn_summary