前端字体图标,2D变形,以及渐变的使用

最新推荐文章于 2024-05-31 14:44:29 发布

hhhhboom

最新推荐文章于 2024-05-31 14:44:29 发布

阅读量182

点赞数 1

文章标签： css html Powered by 金山文档

本文链接：https://blog.csdn.net/hhhhboom/article/details/129356814

版权

一、字体图标

下载字体图标（了解）

字体图标的选择，上传 UI美工她们来做的，我们了解即可。

使用字体图标（重点）

引入相关文件（前提）

复制相关的文件，到 fonts文件夹里面。

引入 css

<linkrel="stylesheet"href="./fonts/iconfont.css">

使用类名引入字体图标（重点记住）

如果是一个标签来使用字体文件，可以采取2个类名的形式。（开发最常用）

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

第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。不是普通的文字。

第二个类名 icon-daohangdizhi，告诉盒子到底使用哪个小图标。

使用unicode编码(了解)

也可以直接在标签内部放入一个编码

html标签

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>

三、渐变

线性渐变(了解)

基本语法：