Day01笔记
移动web（PC端）- 字体图标、平面转换、渐变
字体图标 - Iconfont
字体图标：展示是图标，本质是字体
使用方法：处理简单、颜色单一的图片
图标库
下载字体包：
使用字体图标：
使用字体图标-Unicode编码：
-
引入样式表：iconfont.css
-
复制粘贴图标对应的Unicode编码
-
设置文字字体
字体图标-Unicode编码：
<!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>01-字体图标基本使用-类名</title>
<!-- 1.引入iconfont.css文件 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
/* 3.设置span标签的字体家族 */
span{
/* ff */
font-family: 'iconfont';
}
/* 4.修改字体颜色 */
.s1{
color: red;
font-size: 100px;
}
</style>
</head>
<body>
<!-- 2.通过i标签把unicode编码复制过来 -->
<span class="s1"></span>
<span></span>
</body>
</html>
字体图标-iconfont类名& icon-xxx
<!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>01-字体图标基本使用-类名</title>
<!-- 1.引入iconfont.css文件 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
.s1{
color: yellow;
}
</style>
</head>
<body>
<!-- 2.通过i标签把unicode编码复制过来 -->
<span class="iconfont icon-yanjing"></span>
<span class="iconfont icon-yanjing s1"></span>
</body>
</html>
上传矢量图：
-
上传→上传SVG图标
-
浏览本地图标→去除颜色提交
-
加入购物车→下载使用
平面转换 — transform
平面转换
- 改变盒子在平面内的形态（位移、旋转、缩放）
- 2D转换
位移 — translate
transform: translate(水平移动距离, 垂直移动距离);
取值（正负均可）
- 像素单位数值
- 百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
技巧
- translate()如果只给出一个值, 表示x轴方向移动距离
- 单独设置某个方向的移动距离：translateX() & translateY()
<!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>03-平面转换-位移</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
div{
width: 100px;
height: 100px;
background-color: aqua;
/* 平面转换 位移 */
/* transform: translate(0px,0px); */
/* 快捷敲代码的技巧 */
/* trf:t */
/* transform: translate(0px, 0px); */
/* 使用 百分百单位的 相对于自身的尺寸 */
/* transform: translate(100%,100%); */
/* 控制元素只在某一个方向上的位移 方式两种 */
/* transform: translate(100px,0px); */
transform: translateX(100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!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>04-平面转换-位移</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box{
width: 600px;
height: 600px;
background-color: aqua;
margin: 100px auto;
position: relative;
}
.son{
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
/*
margin和定位的百分比单位 都是相对于父亲
只有 位移 translate 百分比是相对于 自身的！
假如：
width: 397px;
height: 293px;
margin-top: 自身高度的一半
margin-left: 自身宽的一半 当我们盒子的宽度发生了改变之后，
margin的值 重新去计算一下..
*/
margin-top: -200px;
margin-left: -200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>
<!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>05-平面转换-位移居中</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box{
width: 600px;
height: 600px;
background-color: blue;
margin: 100px auto;
position: relative;
}
.son{
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
background-color: yellow;
/*
以前：设置margin值 移动 自身的宽度的高度 一半
现在： 位移 translate 百分比单位 相对于自身的宽度和高度
*/
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>
旋转 — rotate
transform: rotate(角度);
注意：角度单位是deg
技巧：取值正负均可
- 取值为正, 则顺时针旋转
- 取值为负, 则逆时针旋转
<title>06-旋转</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
img{
display: block;
margin: 50px auto;
transform: rotate(0deg);
}
</style>
<body>
<img src="./images/rotate.png" alt="">
</body>
转换原点 — origin
- 默认圆点是盒子中心点
- transform-origin: 原点水平位置原点垂直位置;
<!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>06-旋转</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
img{
display: block;
margin: 100px auto;
transition: 2s;
border: 1px solid #000;
/*
修改元素的旋转的中心点
transform-origin:方位名词;
transform-origin:像素;
transform-origin:百分比单位;
*/
/* 左上角 */
/* transform: top left;
transform: 0px 0px;*/
/* 右上角 */
/* transform: right bottom;
transform: 650px 650px;*/
/* 相对于自身的尺寸 */
transform: 100% 100%;
}
img:hover{
transform: rotate(720deg);
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="">
</body>
</html>
取值
- 方位名词（left、top、right、bottom、center）
- 像素单位数值
- 百分比（参照盒子自身尺寸计算）
多重转换技巧
transform: translate() rotate();
<!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>07-多重转换</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* div{
width: 400px;
height: 400px;
margin: 200px auto;
background-color: aqua;
transition: 3s;
} */
img:hover{
/*
当我们要实现 多种转换效果的时候
不能写多行transform 错误！ 被层叠！！ */
/* 位移 */
/* transform: translateX(500px); */
/* 旋转 */
/* transform: rotate(360deg); */
/* 正确写法 */
transform: translateX(600px) rotate(360deg);
/*
当位移和旋转共同出现时候
1.先位移后旋转
2.先旋转后位移
3.以上的两个效果不一样！！！
4.原因：
先旋转的时候 物体在旋转的时候 坐标系也跟着旋转！！
5.建议
先位移 再去旋转！！理解！
*/
}
.box{
width: 800px;
height: 200px;
border: 1px solid #000;
margin: 0 auto;
}
img{
width: 200px;
height: 200px;
transition: 3s;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/tyre1.png" alt="">
</div>
</body>
</html>
多重转换原理
- 旋转会改变网页元素的坐标轴向
- 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
缩放 — scale
transform: scale(x轴缩放倍数, y轴缩放倍数);
技巧
- 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
- transform:scale(缩放倍数);
- scale值大于1表示放大, scale值小于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>09-缩放</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* div{
width: 200px;
height: 200px;
background-color: aqua;
transition: 1s;
margin: 200px auto;
} */
/* div:hover{
/* 设置缩放
宽度变成之前的两倍 高度之前的一半 */
/* transform: scale(2,0.5); */
/* 宽度和高度变成之前的两倍 */
/* transform: scale(2); */
/* }
*/
.box{
width: 320px;
height: 230px;
margin: 100px auto;
border: 1px solid #000;
overflow: hidden;
}
img{
width: 100%;
height: 100%;
transition: 2s;
}
img:hover{
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/product.jpg" alt="">
</div>
</body>
</html>
渐变背景 — background-image
- 渐变是多个颜色逐渐变化的视觉效果
- 一般用于设置盒子的背景
<style>
background-image: linear-gradient(
/* 颜色1，*/
transparent,
/* 颜色2 */
rgba(0,0,0,.6)
);
</style>
/* 渐变
1、一定要背景图片添加 不是 背景 颜色！！（渐变不是单指一种颜色）
*/
/* background-image: linear-gradient(blue, red); */
/* 设置多种渐变的颜色 */
/* background-image: linear-gradient(black blue, red); */
/* 分层的渐变 不算 两种颜色 比较常用渐变！！*/
/*
盒子上下划分 高度 100%
0% - 30% black
30% - 50% black -> red
50% - 80% red -> blue
80% - 100% blue
*/
/* background-image: linear-gradient(
black 30%,
red 50%,
blue 80%,
blue 100%
); */
/* 渐变的方向 */
/* 方位的名词
1、默认值 to bottom 从上到下
2、上到下 to top
3、右上角 to right top
角度deg
background-image: linear-gradient(to right top,black, red);
background-image: linear-gradient(0deg,black, red);
总结
1、要给 背景图片添加
2、设置 多种渐变色
3、设置 多种渐变色 分层
4、设置 渐变颜色方向
1 方向名词
2 100deg
*/
