字体图标使用 / CSS3特性

A-sleep

已于 2022-04-12 10:42:16 修改

阅读量205

点赞数 1

文章标签： css css3 html

于 2021-11-26 17:09:48 首次发布

本文链接：https://blog.csdn.net/FellAsleep/article/details/121564417

版权

本文介绍了如何使用字体图标，包括引入、类名使用和Unicode编码方式，并详细阐述了CSS变形的transform属性，如位移、旋转、缩放和渐变的应用。通过实例展示了如何实现开门大吉的动画效果，以及transform在布局和居中对齐中的作用。

摘要由CSDN通过智能技术生成

字体图标

具体的步骤：

使用

复制相关的文件，到 fonts文件夹里面。
引入 css <link rel="stylesheet" href="./fonts/iconfont.css">
如果是一个标签来使用字体文件，可以采取2个类名的形式。（重点）
```
<span class="iconfont icon-daohangdizhi"></span>
```
- 第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。不是普通的文字。
- 第二个类名 icon-daohangdizhi，告诉盒子到底使用哪个小图标。

如果使用unicode编码(了解)

<strong> &#xe8ab; </strong>

css

 strong {
      font-family: 'iconfont';
}

如果是伪元素：

<div class="car1">购物车</div>

这样结构比较的清晰，省了很多的小盒子

.car1::before {
    content: '\e8c6';
    color: blue;
    margin-right: 5px;
    font-family: "iconfont" !important;
}
.car1::after {
    content: '\e665';
    font-family: "iconfont" !important;
}

二、变形 transform

位移

语法：

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

问题：

他和margin有啥区别。
- margin移动盒子会影响其余的盒子。把其他人挤走
- 位移translate移动盒子不会影响其他的盒子。不脱标。

注意：

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

 transform: translateX(100%);

应用：

可以让一个子盒子在父盒子里面水平和垂直居中。

.father {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: pink;
    margin: 100px auto;
}

.son {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 百分比，往上走盒子自己高度的一半，往左走盒子宽度的一半 */
    transform: translate(-50%, -50%);
    width: 199px;
    height: 199px;
    background-color: skyblue;
}

开门大吉案例

效果：

<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.box {
overflow: hidden;
width: 1366px;
height: 600px;
margin: 50px auto;
background: url(./images/bg.jpg) no-repeat top center;
}

.box::before,
.box::after {
content: '';
width: 50%;
height: 600px;
transition: .5s;
background: url(./images/fm.jpg) no-repeat;
}

.box::before {
float: left;
background-color: pink;
}

.box::after {
float: right;
background-color: purple;
/* 背景图片右对齐 */
background-position: right center;
}

/* .box:hover
.box::before */
/* 鼠标经过 box 大盒子，两个子盒子（before 和 after）来拉动 */
.box:hover::before {
/* 百分比是盒子自身的宽度 */
transform: translateX(-100%);
}

.box:hover::after {
/* 百分比是盒子自身的宽度 */
transform: translateX(100%);
}
</style>
</head>

</html>

旋转 rotate

语法：

transform: rotate(45deg);    一定写单位

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

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

设置中心点 transform-origin

/* 设置旋转的中心点位置 */

  transform-origin: right bottom;

多形态变形小技巧

如果也需要移动，也需要旋转，则一定先写移动，后写旋转
```
 transform: translate(-50%, -50%) rotate(360deg);
```
注意，多个值之前用空格隔开。

缩放 scale

语法：

transform: scale(1.2)；

它比这宽度和高度最大的优势：他是用中心点来进行缩放的，同样他不会影响其他的盒子。

渐变

线性渐变

语法：

      background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));

A-sleep

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
字体图标使用 / CSS3特性

字体图标具体的步骤：使用复制相关的文件，到 fonts文件夹里面。引入 css <link rel="stylesheet" href="./fonts/iconfont.css"> 如果是一个标签来使用字体文件，可以采取2个类名的形式。（重点） <span class="iconfont icon-daohangdizhi"></span> 第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体.
复制链接

扫一扫