1、字体
1.1、认识Web字体
在之前我们有设置过页面使用的字体: font-family
- 我们需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。
- 这样的方式完全没有问题，但是对于传统的web开发人员来说，字体选择是有限的;
- 这就是所谓的 Web-safe 字体;
- 并且这种默认可选的字体并不能进行一些定制化的需求;
比如下面的字体样式, 系统的字体肯定是不能实现的
那么我们是否依然可以在网页中使用这些字体呢? 使用Web Fonts即可
1.2、Web fonts的工作原理
首先, 我们需要通过一些渠道获取到希望使用的字体(不是开发来做的事情):
- 对于某些收费的字体, 我们需要获取到对应的授权;
- 对于某些公司定制的字体, 需要设计人员来设计;
- 对于某些免费的字体, 我们需要获取到对应的字体文件;
其次, 在我们的CSS代码当中使用该字体(重要):
- 具体的过程看后面的操作流程;
最后, 在部署静态资源时, 将HTML/CSS/JavaScript/Font一起部署在静态服务器中;
用户的角度:
- 浏览器一个网页时, 因为代码中有引入字体文件, 字体文件会被一起下载下来;
- 浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体；
- 在浏览器中使用对应的字体显示内容；
1.3、使用Web Fonts
第一步：在字体天下网站下载一个字体
- 中文字体免费下载和在线预览-字体天下
- 默认下载下来的是ttf文件；
第二步：使用字体；
使用过程如下：
- 将字体放到对应的目录中
- 通过 @font-face 来引入字体, 并且设置格式
- 使用字体
注意: @font-face 用于加载一个自定义的字体;
<!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>
/* 将这个字体引入到网页中 */
@font-face {
font-family: "why";
src: url("./fonts/AaQingHuanYuanTi-2.ttf");
}
.box {
font-family: "why";
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
</body>
</html>1.4、web-fonts的兼容性
我们刚才使用的字体文件是 .ttf, 它是TrueType字体.
- 在开发中某些浏览器可能不支持该字体, 所以为了浏览器的兼容性问题, 我们需要有对应其他格式的字体;
TrueType字体：拓展名是 .ttf
- OpenType/TrueType字体：拓展名是 .ttf、.otf，建立在TrueType字体之上
- Embedded OpenType字体：拓展名是 .eot， OpenType字体的压缩版
- SVG字体：拓展名是 .svg、 .svgz
- WOFF表示Web Open Font Format web开放字体：拓展名是 .woff，建立在TrueType字体之上
这里我们提供一个网站来生产对应的字体文件：在线字体编辑器-JSON在线编辑器
1.5、web fonts兼容性写法
如果我们具备很强的兼容性, 那么可以如下格式编写:
<!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>
@font-face {
font-family: "why";
src: url("./fonts02/AaQingHuanYuanTi.eot"); /* IE9 */
src: url("./fonts02/AaQingHuanYuanTi.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("./fonts02/AaQingHuanYuanTi.woff") format("woff"), /* chrome、firefox */ url("./fonts02/AaQingHuanYuanTi.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */ url("./fonts02/AaQingHuanYuanTi.svg#uxfonteditor") format("svg"); /* iOS 4.1- */
font-style: normal;
font-weight: 400;
}
body {
font-family: "why";
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
</body>
</html>这被称为"bulletproof @font-face syntax（刀枪不入的@font-face语法）“:
- 这是 Paul Irish早期的一篇文章提及后@font-face开始流行起来 (Bulletproof @font-face Syntax)。
src用于指定字体资源
- url指定资源的路径
- format用于帮助浏览器快速识别字体的格式;
1.6、字体图标
- 字体图标
- 字体图标展示的是图标，本质是字体。
- 处理简单的、颜色单一的图片
1.7、字体图标的优点：
- 灵活性：灵活地修改样式，例如：尺寸、颜色等
- 轻量级：体积小、渲染快、降低服务器请求次数
- 兼容性：几乎兼容所有主流浏览器
- 使用方便：
- 下载字体包
- 使用字体图标
图标库：Iconfont：https://www.iconfont.cn/
1.8、下载字体包：
登录 → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地
1.9、使用字体图标：
Unicode编码
类名
1.10、使用字体图标 - Unicode编码：
- 引入样式表：iconfont.css
- 复制粘贴图标对应的Unicode编码
- 设置文字字体
1.11、使用字体图标 – 类名：
（1）引入字体图标样式表
（2）调用图标对应的类名，必须调用2个类名
- 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>Document</title>
<style>
@font-face {
font-family: "iconfont";
src: url("./fonts03/iconfont.ttf");
}
.iconfont {
font-family: "iconfont";
font-style: normal;
}
.music::before {
content: "\e664";
}
.icon {
display: inline-block;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<!-- 直接通过内容(字符实体) -->
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="icon"></i>
<!-- 不使用字符实体的方式展示出来(伪元素) -->
<i class="iconfont music"></i>
</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>Document</title>
<link rel="stylesheet" href="./fonts03/iconfont.css">
<style>
.icon-shouye {
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<i class="iconfont icon-shouye"></i>
</body>
</html>2、平面转换
2.1、平面转换概念
- 平面转换
- 改变盒子在平面内的形态（位移、旋转、缩放）
- 2D转换
- 平面转换属性
- transform
2.2、位移
- 语法：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>位移-基本使用</title>
<style>
.father {
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
}
.son {
width: 200px;
height: 100px;
background-color: pink;
transition: all 0.5s;
}
/* 鼠标移入到父盒子，son改变位置 */
.father:hover .son {
/* transform: translate(100px, 50px); */
/* 百分比: 盒子自身尺寸的百分比 */
/* transform: translate(100%, 50%); */
/* transform: translate(-100%, 50%); */
/* 只给出一个值表示x轴移动距离 */
/* transform: translate(100px); */
transform: translateY(100px);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>2.3、位移-绝对定位居中
使用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>2.4、旋转
使用rotate实现元素旋转效果
- 语法：transform: rotate(角度);
- 注意：角度单位是deg
- 技巧：取值正负均可
- 取值为正, 则顺时针旋转
- 取值为负, 则逆时针旋转
<!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>2.5、转换原点
使用transform-origin属性改变转换原点
- 语法：
- 默认圆点是盒子中心点
- 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>2.6、多重转换
使用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>多重转换</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>2.7、缩放
- 使用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>缩放效果</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>2.8、倾斜 - skew
旋转：skew(x, y)
值个数
- 一个值时，表示x轴上的倾斜
- 二个值时，表示x轴和y轴上的倾斜
值类型：
- deg：旋转的角度
- 正数为顺时针
- 负数为逆时针
注意：旋转的原点受transform-origin的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Document</title>
<style>
.box {
font-style: italic;
width: 200px;
height: 100px;
background-color: orange;
}
.box:hover {
transform: skew(10deg, 10deg);
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
</body>
</html>
3、渐变
- 使用background-image属性实现渐变背景效果
- 渐变是多个颜色逐渐变化的视觉效果
- 一般用于设置盒子的背景
<!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: 200px;
/* background-image: linear-gradient(
pink,
green,
hotpink
); */
background-image: linear-gradient(
transparent,
rgba(0,0,0, .6)
);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>使用background-image属性实现渐变背景效果
4、案例
4.1、双开门
右侧盒子背景图
- background-position: right;
- left：向左侧移动自身宽度
- right：向右侧移动自身宽度
<!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>4.2、 缩放案例
<!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>
1205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
