本文详细介绍了HTML和CSS的进阶应用，包括字体图标、平面转换的各种效果（如位移、居中、旋转、缩放）、渐变的使用以及综合案例分析，通过实例展示了如何实现购物车、双开门、旋转动画等效果。
文章目录
1 字体图标
1.1 字体图标的基本使用
上图黄色标注为字体图标，显示为图标，但本质为字体。
怎么制作先不用管，可以在阿里巴巴矢量图标库中下载，得到一个压缩包。
其中有一个html文件和iconfont.css文件，html可以打开看有什么图标和图标对应的名字，iconfont.css文件则是要在代码中引用，引用和调用方式如下
<head>
//引用字体图标样式表
<link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
//调用选择的字体图标,其中类名的格式为iconfont + 图标名称，以下的图标为上图的爱心，红色为其图标名称
<i class="iconfont icon-favorites-fill"></i>
</body>
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>购物车</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="#">
<!-- 调用购物车图标 -->
<span class="iconfont icon-cart-Empty-fill orange"></span>
<span>购物车</span>
<!-- 调用向下的图标 -->
<span class="iconfont icon-arrow-down"></span>
</a>
</li>
</ul>
</div>
</body>
</html>
2 平面转换
2.1 位移基本使用
transform:translate(水平移动距离，垂直移动距离)
如图，水平为正向右，为负向左，上下同理。
transform:translate(10px,-20px):表示向右移动10px,向上移动20px.
transform:translate(-50%,50%):表示向左移动自身尺寸的50%,向下移动自身尺寸的50%.
2.2 绝对定位元素居中
目标：用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>
.father {
position: relative;
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
}
.son {
position: absolute;
/* 核心代码 */
left: 50%;
top: 50%;
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%会让图跑到中心的右下角（如下图红色部分）,然后只要让它分别向左向上移动自身尺寸大小的50%即可，代码为transform:translate(-50%,-50%)
2.3 案例-双开门
要求：鼠标未移动之前，显示左图，鼠标移动到该图后，两辆车分别向两边移动。非动图效果如下：
实现过程简述：首先放最底下那张图，然后用伪元素before after放两车图，before控制左车,after控制右车（这算是一个难点）,当鼠标移到后，左车向左移动100%（表示自身尺寸的100%），右车向右移动100%,这时候车肯定会超过父级盒子范围，只需要在父级盒子那里加上overflow:hidden即可。
完整代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compa
最低0.47元/天 解锁文章
扫一扫
1015
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
