Web进阶：Day1
Date: October 3, 2022
Summary: 字体图标、平面转换、空间转换、动画
字体图标
字体图标
字体图标展示的是图标，本质是字体
处理简单的、颜色单一的图片
注：复杂的用CSS精灵，简单的用字体图标
字体图标的优点：
灵活性：灵活地修改样式，例如：尺寸、颜色等
轻量级：体积小、渲染快、降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
使用方便：
- 下载字体包
- 使用字体图标
图标库
Iconfont：https://www.iconfont.cn/
具体步骤：
使用字体图标 - Unicode编码：
- 引入样式表：iconfont.css
- 复制粘贴图标对应的Unicode编码
<span></span>
- 设置文字字体
span{
font-family:'iconfont';
}
使用字体图标 – 类名：
- 引入字体图标样式表
<link rel="stylesheet" href="./iconfont.css">
- 调用图标对应的类名，必须调用2个类名
- iconfont类：基本样式，包含字体的使用等
- icon-xxx：图标对应的类名
<span class="iconfont icon-xxx"></span>
案例：基础练习
-
Code:
<!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> <link rel="stylesheet" href="./iconfont/iconfont.css"> <style> i{ font-size: 60px; } </style> </head> <body> <!-- iconfont是固定的 icon-favorites-fill是你要的图标--> <i class="iconfont icon-favorites-fill"></i> </body> </html>
案例：淘宝
-
Code :
<head> <!-- 练习： 1.引样式表 2.调用类名 --> <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>购物车</title> <!-- 引样式表 --> <link rel="stylesheet" href="./iconfont/iconfont.css"> <style> * { margin: 0; padding: 0; } li { list-style: none; } a { color: #333; text-decoration: none; } .nav { width: 200px; margin: 50px auto; font-size: 12px; } /* 让图标变橙 */ .orange { color: #f40; } </style> </head> <body> <div class="nav"> <ul> <li> <a href="#"> ddd <!-- 调用类名 --> <span class="iconfont icon-cart-Empty-fill orange"></span> <span>购物车</span> <span class="iconfont icon-arrow-down"></span> </a> </li> </ul> </div> </body>
上传矢量图：
思考：如果图标库没有项目所需的图标怎么办？
答：IconFont网站上传矢量图生成字体图标
-
与设计师沟通，得到SVG矢量图
-
IconFont网站上传图标，下载使用
上传矢量图：
上传 → 上传SVG图标
浏览本地图标 → 去除颜色提交
加入购物车 → 下载使用
平面转换
平面转换基础：
平面转换概念
改变盒子在平面内的形态（位移、旋转、缩放），这是一种2D转换
平面转换属性
语法
transform: translate(水平移动距离, 垂直移动距离);
取值（正负均可）
像素单位数值
百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
eg：
transform: translate(100px, 100px);
/* 百分比: 盒子自身尺寸的百分比 */
/* transform: translate(100%, 50%); */
/* 只给出一个值表示x轴移动距离 */
/* transform: translate(100px); */
/* transform: translateY(100px); */
补充技巧：
translate()如果只给出一个值, 表示x轴方向移动距离
单独设置某个方向的移动距离：translateX() & translateY()
案例：
使用translate快速实现绝对定位的元素居中效果
<!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>绝对定位元素居中效果</title>
<style>
.father {
position: relative;
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
}
.son {
position: absolute;
left: 50%;
top: 50%;
/* margin-left: -100px;
margin-top: -50px; */
transform: translate(-50%, -50%);
width: 203px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
理解：
这是初始位置：
left: 50%;
top: 50%;
经过位移转变后：
transform: translate(-50%, -50%);
双开门：
原理：位移取值为百分比数值，参照盒子自身尺寸计算移动距离
右侧盒子背景图
left：向左侧移动自身宽度
right：向右侧移动自身宽度
案例：玛莎拉蒂
-
Code:
<!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 { width: 1366px; height: 600px; margin: 0 auto; background: url('./images/bg.jpg'); /* 超出父级范围的要隐藏 */ overflow: hidden; } .box::before, .box::after { float: left; content: ''; width: 50%; height: 600px; background-image: url(./images/fm.jpg); transition: all .5s; } .box::after { background-position: right 0; } /* 鼠标移入的时候的位置改变的效果 */ .box:hover::before { transform: translate(-100%); } .box:hover::after { transform: translateX(100%); } </style> </head> <body> <div class="box"> </div> </body> </html>
旋转
语法
transform: rotate(角度);
注意：角度单位是deg
技巧：取值正负均可
取值为正, 则顺时针旋转
取值为负, 则逆时针旋转
Code:
<!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>旋转效果</title>
<style>
img {
width: 250px;
/* 需要保证有时间过渡，否则将会无法运转 */
transition: all 2s;
}
img:hover {
/* 顺 */
transform: rotate(360deg);
/* 逆 */
/* transform: rotate(-360deg); */
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="">
</body>
</html>
转换原点
语法
transform-origin: 原点水平位置 原点垂直位置;
注意 : 默认圆点是盒子中心点
取值
方位名词（left、top、right、bottom、center）
这个是基于哪个点进行旋转，重点常用，下面不常用
像素单位数值
百分比（参照盒子自身尺寸计算）
案例：
<!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>转换原点</title>
<style>
img {
width: 250px;
border: 1px solid #000;
transition: all 2s;
transform-origin: right bottom;
transform-origin: left bottom;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="">
</body>
</html>
多重转换
多重转换代码：
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>多重转换</title>
<style>
.box {
width: 800px;
height: 200px;
border: 1px solid #000;
}
img {
width: 200px;
transition: all 8s;
}
.box:hover img {
/* 边走边转 */
transform: translate(600px) rotate(360deg);
/* 旋转可以改变坐标轴向 */
/* transform: rotate(360deg) translate(600px); */
/* 层叠性 */
/* transform: translate(600px);
transform: rotate(360deg); */
}
</style>
</head>
<body>
<div class="box">
<img src="./images/tyre1.png" alt="">
</div>
</body>
</html>
多重转换原理
旋转会改变网页元素的坐标轴向
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
所以我们先以translate为基准，在保证坐标轴向的基础上，进一步地让轮胎旋转
缩放
思考: 改变元素的width或height属性能实现吗？
**语法：**transform: scale(x轴缩放倍数, y轴缩放倍数);
技巧
一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小
案例：
-
Code:
<!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>缩放效果</title> <style> .box { width: 300px; height: 210px; margin: 100px auto; background-color: pink; } .box img { width: 100%; transition: all 0.5s; } .box:hover img { /* width: 150%; */ transform: scale(1.2); transform: scale(0.8); } </style> </head> <body> <div class="box"> <img src="./images/product.jpeg" alt=""> </div> </body> </html>
案例：和平精英
播放按钮
布局 ::after
样式 居中
效果
缩放
透明度（opacity）
-
Code:
<!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; } li { list-style: none; } img { width: 100%; } .box { width: 249px; height: 210px; margin: 50px auto; overflow: hidden; } .box p { color: #3b3b3b; padding: 10px 10px 0 10px; } .box .pic { position: relative; } .box .pic::after { /* 播放按钮压在图片上面 - 居中 */ position: absolute; left: 50%; top: 50%; /* margin-left: -29px; margin-top: -29px; */ /* transform: translate(-50%, -50%); */ content: ''; width: 58px; height: 58px; background-image: url(./images/play.png); /* 大图 */ transform: translate(-50%, -50%) scale(5); /* 透明,看不见 */ opacity: 0; transition: all .5s; } /* lihover的时候, 谁变小pic::after */ .box li:hover .pic::after { opacity: 1; transform: translate(-50%, -50%) scale(1); } </style> </head> <body> <div class="box"> <ul> <li> <div class="pic"><img src="./images/party.jpeg" alt=""></div> <p>【和平精英】“初火”音乐概念片：四圣觉醒......</p> </li> </ul> </div> </body> </html>
渐变
渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景
方式1：
background-image: linear-gradient(
颜色1,
颜色2
);
方式2：
background-image: linear-gradient(
transparent,
rgba(0,0,0, .6)
);
案例：
Code:
-
<!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: 300px; height: 200px; background-image: linear-gradient( transparent, rgba(0,0,0, .6) ); } </style> </head> <body> <div class="box"></div> </body> </html>
案例：华为渐变产品
Code:
-
<!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 { position: relative; } .box img { width: 300px; } .box .title { position: absolute; left: 15px; bottom: 20px; /* 放在顶层 */ z-index: 2; width: 260px; color: #fff; /* 字体大小 */ font-size: 20px; /* 字体粗细 */ font-weight: 700; } .box .mask { position: absolute; left: 0; top: 0; opacity: 0; width: 300px; height: 212px; background-image: linear-gradient( transparent, rgba(0, 0, 0, .6) ); transition: all .5s; } .box:hover .mask { opacity: 1; } </style> </head> <body> <div class="box"> <img src="./images/product.jpeg" alt="?"> <div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div> <div class="mask"></div> </div> </body> </html>
综合案例：
案例；
Code: 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>华为新闻</title> <link rel="stylesheet" href="./iconfont/iconfont.css"> <link rel="stylesheet" href="./css/demo.css"> </head> <body> <div class="box"> <ul> <li> <a href="#"> <div class="pic"> <img src="./images/product.jpeg" alt=""> </div> <div class="txt"> <h4>产品</h4> <h5>OceanStor Pacific 海量存储斩获2021 Interop金奖</h5> <p> <span>了解更多</span> <i class="iconfont icon-arrow-right"></i> </p> </div> <!-- 添加渐变背景 --> <div class="mask"></div> </a> </li> <li> <a href="#"> <div class="pic"> <img src="./images/huawei1.jpeg" alt=""> </div> <div class="txt"> <h4>行业洞察</h4> <h5>迈向智能世界2030</h5> <p> <span>了解更多</span> <i class="iconfont icon-arrow-right"></i> </p> </div> <!-- 添加渐变背景 --> <div class="mask"></div> </a> </li> <li> <a href="#"> <div class="pic"> <img src="./images/huawei2.jpeg" alt=""> </div> <div class="txt"> <h4>《ICT新视界》刊首语</h4> <h5>笃行致远，共建具有获得感、幸福感、安全感的智慧城市</h5> <p> <span>了解更多</span> <i class="iconfont icon-arrow-right"></i> </p> </div> <!-- 添加渐变背景 --> <div class="mask"></div> </a> </li> </ul> </div> </body> </html> -
Code:CSS
* { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } a { text-decoration: none; } img { width: 100%; vertical-align: middle; } .box { width: 1110px; height: 247px; margin: 20px auto; /* background-color: pink; */ } .box li { position: relative; float: left; width: 350px; height: 247px; margin-right: 30px; /* 溢出隐藏 */ overflow: hidden; } .box li:last-child { margin-right: 0; } .box .txt { position: absolute; left: 0; bottom: -50px; width: 350px; height: auto; padding: 20px 30px; z-index: 1; color: #fff; transition: transform .5s; /* transition: all .5s; */ } .box .txt h4 { font-size: 14px; font-weight: 400; line-height: 2em; color: #fff; } .box .txt h5 { margin-bottom: 40px; font-size: 18px; line-height: 1.5em; color: #fff; } .box .txt p { color: #fff; font-size: 14px; } .box .txt p .iconfont { color: #c7000b; vertical-align: middle; font-size: 20px; font-weight: 700; } /* 1. 渐变背景的盒子 */ .box .mask { position: absolute; left: 0; top: 0; width: 350px; height: 247px; background-image: linear-gradient( transparent, rgba(0,0,0,.6) ); opacity: 0; transition: all .5s; } /* 2. hover效果 */ /* 2.1 图片缩放 */ .box li .pic img { transition: all .5s; } .box li:hover .pic img { transform: scale(1.2); } /* 2.2 渐变背景显示 */ .box li:hover .mask { opacity: 1; } /* 2.3 文字向上移动 */ .box li:hover .txt { transform: translateY(-50px); }
