一、字体图标
1.字体图标
目标：使用字体图标技巧实现网页中简洁的图标效果
（一）字体图标展示的是图标，本质是字体
（二）处理简单的、颜色单一的小图标
字体图标的优点：
灵活性：灵活地修改样式，例如：尺寸、颜色等
轻量级：体积小、渲染块、降低服务器请求次数
兼容性：几乎兼容所有主流浏览器（除老版ie浏览器）
使用方便
图标库：Iconfont：https://www.iconfont.cn/ 阿里巴巴字体库 (常用)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pGidXFXJ-1678031253260)(C:\Users\xmm\AppData\Roaming\Typora\typora-user-images\1677932486628.png)]
下载字体包（了解）：
登录——>选择图标库——>选择图标，加入购物车——>购物车——>添加至项目——>下载至本地
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RTdnz1vs-1678031253264)(C:\Users\xmm\AppData\Roaming\Typora\typora-user-images\1677932629162.png)]
2.使用方法
步骤：
（一）复制相关文件到本地目录下，并引入字体图标css文件
（二）标签使用字体图标
使用字体图标-类名
1.引入字体图标样式表
<link rel="stylesheet" href="../02-案例/fonts/iconfont.css">
2.调用图标对应的类名，必须调用2个类名
iconfont类：基本样式，包含字体的使用等
icon-xxx：图标对应的类名
<i class="iconfont icon-camera"></i>
注意点：
1.css引入路径不要出错，页面出现空白
2.类名出错显示长方形
3.使用类名引入字体图标类名前面不要带点
4.添加字体样式时需要注意权重问题
使用字体图标-Unicode
1.引入字体图标样式表
<link rel="stylesheet" href="../02-案例/fonts/iconfont.css">
2.使用Unicode编码
<i class="iconfont"></i>
<i class="iconfont"></i>
使用字体图标-伪元素
1.引入字体图标样式表
<link rel="stylesheet" href="../02-案例/fonts/iconfont.css">
2.使用伪元素
i::after{
content: '\e600';
}
字体图标的线上用法
1.把线下本地的iconfont.css换成在线的地址，前面记得带http:协议进行引入即可 -->
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3930692_f32ngekk9y.css">
2.类名，unicode，伪元素全部和线下一致
<i class="iconfont icon-aixin"></i>
<span class="iconfont"></span>
<em class="iconfont"></em>
二、平面转换
1.位移
位移：transform 属性名
属性值：translate(x,y) ； translateX(); translateY();
取值：1.像素单位px 2.百分比（参照物为盒子自身尺寸）
技巧：左负右正，上负下正
transform: translateX(100px);
transform: translateY(100px);
transform: translate(200px,200px);
margin和translate的区别
1.外边距移动的百分比是父盒子的大小，在移动时会影响其他的盒子
2.位移移动的百分比是自己的大小 x轴是自己的宽 y轴就是自己的高；位移在移动时不会影响其他的盒子，有类似于相对定位的特点
开门案例
<!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: 1366px;
height: 600px;
margin: 0 auto;
overflow: hidden;
background-image: url(./images/bg.jpg);
}
.box div{
width: 50%;
height: 600px;
transition: all 1s;
}
.left{
float: left;
background-image: url(./images/fm.jpg);
}
.right{
float: right;
background: url(./images/fm.jpg) no-repeat right 0px;
}
.box:hover .left{
transform: translateY(-100%);
}
.box:hover .right{
transform: translateY(100%);
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c25wCMxw-1678031253268)(C:\Users\xmm\AppData\Roaming\Typora\typora-user-images\1677934381106.png)]
2.旋转
语法：transform:rotate(角度)；
角度单位：deg(度数) trun(圈数)
技巧：取正值，顺时针旋转
取负值，逆时针旋转
.box img{
width: 100%;
/* 过渡 */
transition: all 1s;
}
.box:hover img{
/* 旋转 */
/* 语法：transform：rotate（角度）；deg度数 turn圈 */
/* 正值是顺时针，负值是逆时针 */
/* transform：rotate（360deg） */
transform: rotate(1turn);
}
转换原点
语法：transform-origin：原点水平位置 原点垂直位置
取值：
1.方位名词（left、top、right、bottom、center）
2.像素单位数值px
3.百分比（参照盒子自身尺寸计算）
.box{
width: 300px;
height: 300px;
background: pink;
margin: 400px;
transition: all 1s;
/* 将原点改到自身盒子宽度一半的位置 */
transform-origin: 50% 0;
}
.box:hover{
transform: rotate(1turn);
}
transform复合属性
轮胎案例：
<!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: 1200px;
height: 300px;
background-color: pink;
}
.box img{
transition: all 3s;
}
.box:hover img{
transform: translateX(900px) rotate(360deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/tyre.png" alt="">
</div>
</body>
</html>
总结：
1.旋转会改变网页元素的坐标轴方向
2.先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
3.缩放
语法：transform: scale(x轴缩放倍数, y轴缩放倍数);
技巧：
1.一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
2.transform: scale(缩放倍数);
3.scale值大于1表示放大, scale值小于1表示缩小
/*
宽和高等比例缩放2倍
transform: scale(2);
1倍就是不变
transform: scale(1);
1倍以下是缩小
transform: scale(0.5)；
负值 值小于-1是缩小 值大于-1是放大
*/
transform: scale(-0.5);
注意点：缩放可以取负值缩小，缩放的倍数为1表示不变，1倍以下是缩小，1倍以上是放大
4.倾斜
语法：transform:skew(角度)
注意点：角度不能为直角90deg
技巧：
正值是向右，负值向左： transform:skew(-60deg)
倾斜单独写法 skewX水平倾斜 skewY垂直倾斜
例： transform:skewX(91deg)
2d推荐综合写法：transform:位移 旋转 缩放 倾斜
height: 200px;
width: 300px;
background-color: pink;
transform: skew(30deg);
transform: translate(200px) rotate(60deg) scale(3) skew(50deg);
三、渐变
使用background-image属性实现渐变背景效果
1.渐变是多个颜色逐渐变化的视觉效果
2.一般用于设置盒子的背景
分为两种渐变：
（1）线性渐变
background-image: linear-gradient(red,green,blue);
/* 从方向开始渐变 to left/right/top/buttem */
background-image: linear-gradient(to left,red,green,blue);
/* 从角度开始渐变 */
background-image: linear-gradient(60deg,red,green,blue);
/* 透明度渐变 */
background-image: linear-gradient(transparent,rgba(0,0,0,.5));
（2）径向渐变（拓展）
径向渐变 从内往外渐变 根据盒子形状变成对应图形 正方形->圆形
background-image: radial-gradient(red, blue);
注意点:
1.渐变色是多个颜色组成,他是背景图不是背景色
2.多个颜色逗号隔开
3.渐变色默认从上往下渐变
4.颜色由设计稿决定,由ui工程师设计
1785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
