使用字体图标（重点）
引入相关文件（前提）
使用类名引入字体图标（重点记住）
如果是一个标签来使用字体文件，可以采取2个类名的形式。（开发最常用）
<span class="iconfont icon-daohangdizhi"></span>
-
第一个类名
iconfont目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。 -
第二个类名
icon-daohangdizhi， 告诉盒子到底使用哪个小图标。
淘宝购物车案例
正在上传…重新上传取消
<!-- 1 引入字体图标样式表 --> <link rel="stylesheet" href="./fonts/iconfont.css"> <div class="car"> <i class="iconfont icon-gouwuche"></i> 购物车 <i class="iconfont icon-down"></i> </div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.car {
width: 200px;
height: 45px;
font-size: 20px;
margin: 100px auto;
border: 1px solid red;
list-style: none;
text-align: center;
line-height: 45px;
}
.icon-gouwuche {
color: #ff4500;
}
使用unicode编码(了解)
也可以直接在标签内部放入一个编码
html标签
<!-- 第一步 引入字体图标样式表 --> <link rel="stylesheet" href="./fonts/iconfont.css"> <!--第二步 找个标签来装字体图标 --> <!-- iconfont 这个类名千万不要漏了哟 --> <i class="iconfont"></i>
css 要指定当前标签的文字是字体图标，必须要声明。
.iconfont {
font-size: 30px;
color: blue;
}
在线字体图标
因为阿里字体库比较稳定，很多情况下，我们无需下载相关文件到本地，直接引入在线地址即可。
<! --一定要记得添加http:或https:--> <link rel="stylesheet" href="http://at.alicdn.com/t/font_3339796_38swcn03c2r.css">
字体图标我们喜欢用 i 标签
<i class="iconfont icon-gouwuche"></i> <i class="iconfont"></i>
使用伪元素字体图标（记住）
<div class="car1">购物车</div>
这样结构比较的清晰，省了很多的小盒子
.car {
width: 200px;
height: 45px;
border: 1px solid pink;
text-align: center;
line-height: 45px;
font-family: 'iconfont';
}
.car::before {
content: "\e63b";
}
.car::after {
content: "\e686";
}
注意： 使用伪元素字体图标，一定要声明字体。 font-family: "iconfont"
小结
字体图标是前端工程师必须具备的知识点。 开发中， 字体图标上传，选择，都是网页美工给我们准备好了。
我们重点是下载和使用。
字体图标使用可以整体分为两大步骤：
-
复制相关文件到网站根目录下，并引入css文件到html页面中。
-
通常都放到fonts文件夹里面。
-
通常iconfont.css 和字体放一起。
-
-
调用。
-
开发中最常用的是使用类名来调用，所以重点记住这个就可以了。
<span class="iconfont icon-daohangdizhi"></span>
-
二、变形 transform（2D）
变形可以改变盒子在平面内的形态（位移、旋转、缩放等等）
位移 translate
translate可以让盒子沿着x轴或者y轴来移动。
语法：
/* 变形 transform-- 位移 translate*/ transform: translate(x, y); transform: translateX(x); transform: translateY(y);
问题：
-
他和margin有啥区别。
-
margin移动盒子会影响其余的盒子。把其他人挤走。
-
位移translate移动盒子不会影响其他的盒子。不脱标。
-
注意：
移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度
transform: translateX(100%);
应用- 盒子水平和垂直
可以让一个子盒子在父盒子里面水平和垂直居中。
.inner {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: skyblue;
transform: translate(-50%, -50%);
}
/* 了解即可 */
/* .inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
background-color: skyblue;
} */
/*分析:*/
.inner {
width: 200px;
height: 200px;
background-color: purple;
/* 左侧全部充满 */
margin-left: auto;
/* 右侧全部充满 */
margin-right: auto;
/* margin: 0 auto; */
}
作业： 请同学们自己整理，实现一个子盒子，在父盒子里面水平居中和垂直居中有哪些方法？ 整理成笔记，做好写一篇博客文章。
开门大吉案例
效果：
正在上传…重新上传取消
<!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>
<body>
<div class="box"></div>
</body>
</html>
旋转 rotate
旋转可以让盒子旋转角度。
语法：
transform: rotate(45deg); 一定写单位
如果是正度数，则是顺时针旋转
如果是负度数，则是逆时针旋转
<!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>
img {
width: 200px;
transition: .5s;
}
img:hover {
/* 旋转语法 */
transform: rotate(-360deg);
}
.arr {
width: 40px;
height: 40px;
border-right: 2px solid pink;
border-bottom: 2px solid pink;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<img src="./images/p4-tx3.png" alt="">
<div class="arr"></div>
</body>
</html>
设置中心点 transform-origin
/* 设置旋转的中心点位置 */
transform-origin: right bottom;
<!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>
img {
width: 200px;
transition: .5s;
/* 旋转中心点 */
/* transform-origin: right bottom; */
}
img:hover {
/* 旋转语法 */
transform: rotate(-360deg);
}
</style>
</head>
<body>
<img src="./images/p4-tx3.png" alt="">
</body>
</html>
多形态变形小技巧
-
如果需要移动，也需要旋转，则一定先写移动，后写旋转,
css属性书写顺序影响代码执行。transform: translate(-50%, -50%) rotate(360deg);
-
注意，多个值之前用 空格隔开。
<!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;
}
/* 1.1 设置大盒子基本样式 */
.box {
width: 800px;
height: 200px;
border: 2px solid pink;
margin: 100px auto;
}
/* 1.2 设置过渡效果 */
.box img {
transition: all 10s;
}
/* 1.3 设置多重转换效果 */
.box:hover img {
/* 正确写法语法 各个属性值之间 使用空格隔开 */
/* transform: translate() rotate(); */
transform: translateX(600px) rotate(360deg);
/* 如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。 */
/* 旋转会改变网页元素的坐标轴方向 */
/* transform: rotate(360deg) translateX(600px); */
}
</style>
</head>
<body>
<div class="box">
<img src="./images/tyre.png" alt="" width="200">
</div>
</body>
</html>
缩放 scale
语法：
transform: scale(1.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>
/* img {
width: 200px;
transition: all .5s;
}
img:hover {
width: 400px;
} */
img {
display: block;
margin: 100px auto;
transition: all .6s;
}
img:hover {
/* 以中心点往四周缩放 */
transform: scale(1.5);
}
</style>
</head>
<body>
<img src="./images/hero.jpeg" alt="">
</body>
</html>
案例：
和平精英
<div class="box"> <ul> <li> <div class="pic"><img src="./images/party.jpeg" alt=""></div> <p>【和平精英】“初火”音乐概念片：四圣觉醒......</p> </li> </ul> </div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
/* 1.1 设置大盒子样式 */
.box {
width: 249px;
height: 210px;
margin: 50px auto;
/* 1.7 开始按钮隐藏*/
overflow: hidden;
}
/* 1.2 图片和父元素一样宽 */
img {
width: 100%;
}
/* 1.3 设置p的字体样式 */
.box p {
color: #3b3b3b;
padding: 10px 10px 0 10px;
}
/* 1.5 子绝父相 */
.box .pic {
position: relative;
}
/* 1.4 利用伪元素插入播放按钮 */
.box .pic::after {
/* 播放按钮压在图片上面 - 居中 */
position: absolute;
left: 50%;
top: 50%;
content: '';
width: 58px;
height: 58px;
background-image: url(./images/play.png);
transform: translate(-50%, -50%) scale(5);
/* 1.8 设置按钮 透明,看不见 */
opacity: 0;
transition: all .5s;
}
/* 1.6 鼠标移入让按钮缩小 */
/* li:hover的时候, 谁变小pic::after */
.box li:hover .pic::after {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
三、渐变
线性渐变
基本语法：
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))
<!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: 300px;
/* background-color: pink; */
/* background-image: linear-gradient(red, green); */
/* 默认的方向是 to bottom */
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
/* background-image: linear-gradient(方向,颜色1, 颜色2...颜色n); */
/* background-image: linear-gradient(to right, red, green, blue); */
}
</style>
</head>
<body>
<div class="box"></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>Document</title>
<link rel="stylesheet" href="./fonts/iconfont.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
position: relative;
overflow: hidden;
float: left;
margin-right: 15px;
width: 446px;
height: 314px;
/* background-color: pink; */
}
.box img {
width: 100%;
height: 100%;
transition: all .4s;
}
.box:hover img {
transform: scale(1.05);
}
/* 半透明的黑色遮罩 */
.box::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background-color: pink; */
/* 线性渐变 */
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
opacity: 0;
/* 如果不加过渡，使用 display:none 也可以的 */
}
.box:hover::after {
opacity: 1;
}
.info {
position: absolute;
left: 0;
bottom: -50px;
z-index: 999;
color: #fff;
padding: 25px 30px;
font-size: 18px;
transition: all .5s;
}
.info h4 {
font-size: 24px;
margin: 5px 0;
}
.info .more {
margin-top: 15px;
}
/* 鼠标经过 大盒子 */
.box:hover .info {
bottom: 0;
/* transform: translateY(-50px); */
}
</style>
</head>
<body>
<div class="box">
<img src="./images/1.jpg" alt="">
<div class="info">
<p>前沿探索</p>
<h4>憧憬6G，共同定义6G</h4>
<p>《6G无线通信新征程》序言</p>
<p class="more">了解更多 <i class="iconfont icon-arrow-right"></i> </p>
</div>
</div>
</body>
</html>
正在上传…重新上传取消正在上传…重新上传取消
1137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
