字体图标iocnfont

1.使用字体图标

1.1引入css

<link rel="stylesheet" href="./fonts/iconfont.css">

类名引入 ,设置iconfont类名和要使用的图标类名icon-daohangdizhi即可

<span class="iconfont icon-daohangdizhi"></span>

使用unicode编码,设置iconfont类名,在标签中写入图标的编码即可

 <strong>  </strong>

2.变形tranform

tranform也可以写3d属性这里暂时不做讨论

2.1位移translate

translate可以让盒子沿着x轴或者y轴来移动。

transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);

注意：

移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度

2.2旋转 rotate

transform: rotate(45deg);

如果是正度数，则是顺时针旋转

如果是负度数，则是逆时针旋转

/* 设置旋转的中心点位置 transform-origin */

如让元素以右下角为轴心旋转

  transform-origin: right bottom;

2.3缩放 scale

让元素缩放1.5倍

transform: scale(1.5)；

2.4倾斜 skew

让某个元素左倾60度

transform: skew(60deg)；

以上元素通常会配合 transition属性使用 transition属性是给予变化过渡时间和性质

3.渐变

3.1线性渐变

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 400px;height: 400px;/* 默认是垂直渐变色 *//* background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); *//* 通过方位名词调整 to就是从哪里开始*/background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));/* 通过角度渐变 注意带单位deg*/background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));}</style>
</head><body><!-- 线性渐变 --><div class="box"></div>
</body></html>

3.2 由内而外渐变

background-image: radial-gradient(circle, red, yellow, green, black);

字体图标iocnfont相关推荐

Swift iOS : 字体图标
厌倦了使用位图在xcode的Assets.xcassets内,因为麻烦,包括如下的麻烦: 找图图需要分尺寸需要操作员类似工作去管理然后,现在有了字体图标,就方便多了: 比较成熟的几套库,用名字就 ...
微信小程序使用阿里巴巴iconfont字体图标
打开阿里巴巴iconfont官网(http://www.iconfont.cn/); 把用到的字体图标加到项目里面; 进入到项目里面,选择font class方式来使用,如果没有生成过代码的同学点生成 ...
[ExtJS5学习笔记]第五节使用fontawesome给你的extjs5应用添加字体图标
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411 本文作者:sushengmiyan ------------------ ...
第104天：web字体图标使用方法
字体图标经常使用的是阿里图标库的:http://www.iconfont.cn/ icomoon图标库的:https://icomoon.io/ 一.阿里库字体图标使用第一步: 首先进入阿里巴巴矢 ...
微信小程序引入字体图标
小程序与平常web开发中引入字体图标的方式不一样,必须先转为base64再引入,以阿里巴巴字体图标 http://iconfont.cn 为例: 一.去官网 http://iconfont.cn 下载 ...
BootStrap字体图标不显示、下拉菜单不显示
在W3CSchool学习BootStrap教程时遇到的问题-- 1.字体图标不能显示上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...
bootsrap Glyphicons 字体图标
2019独角兽企业重金招聘Python工程师标准>>> Glyphicons 字体图标字体图标是可以直接使用的. 使用的时候,可以指点颜色和大小的,,,都不会失真的,因为它 ...
react+webpack 引入字体图标
在使用react+webpack 构建项目过程中免不了要用到字体图标,在引入过程中报错,不能识别字体图标文件中的@符,报错 Uncaught Error: Module parse failed: U ...
css中的代码图标,认识CSS中字体图标(示例代码)
前端之HTML,CSS(十一) 字体图标使用文字做出小图标的效果并超越了小图标应用精灵图,使得图标变得灵活,减少了请求次数,优化了界面的性能.字体图标本身为矢量图. 字体图标的使用过程 1.UI设计 ...

字体图标iocnfont

1.使用字体图标

类名引入 ,设置iconfont类名和要使用的图标类名icon-daohangdizhi即可

使用unicode编码,设置iconfont类名,在标签中写入图标的编码即可

2.变形tranform

2.1位移translate

2.2旋转 rotate

2.3缩放 scale

2.4倾斜 skew

3.渐变

3.1线性渐变

字体图标iocnfont相关推荐

最新文章

热门文章

字体图标iocnfont

1.使用字体图标

类名引入 ,设置iconfont类名 和要使用的图标类名icon-daohangdizhi即可

使用unicode编码,设置iconfont类名,在标签中写入图标的编码即可

2.变形tranform

2.1位移translate

2.2旋转 rotate

2.3缩放 scale

2.4倾斜 skew

3.渐变

3.1线性渐变

字体图标iocnfont相关推荐

最新文章

热门文章

类名引入 ,设置iconfont类名和要使用的图标类名icon-daohangdizhi即可