目录
1.字体图标
2.平面转换
2.1位移
2.2旋转
2.3多重转换
2.4缩放
3.渐变
1.字体图标
引入iconfont平台字体图标样式表
<link rel="stylesheet" href="./iconfont/iconfont.css">
<i class="iconfont xx"></i>
第一个类名iconfont是固定的
第二个类名是对应的字体图标的
为什么第一个类名iconfont是固定的
iconfont 的优先级最高
权重问题：类选择器的优先级高于标签选择器，会被层叠
案例：淘宝购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入iconfont平台字体图标样式表 -->
<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>
图标库没有项目所需的图标解决方案：iconfont网站上传矢量图生成字体图标
- 得到SVG格式的矢量图
- iconfont网站上传图标，下载使用
2.平面转换
屏幕转换：
- 改变盒子在平面内的形态（位移，旋转，缩放）
- 2D转换
平面转换属性：
- transform
坐标系：
2.1位移
语法：
transform：translate（水平移动距离，垂直移动距离）
取值：正负均可
- 像素单位数值
- 百分比（参照物为盒子自身尺寸）：百分比取值也可以为负值
📖Note：
- translate（）如果只给一个值，表示X轴方向移动距离
- 单独设置某个方向的移动距离：translateX() & translateY()
使用translate快速实现绝对定位的元素居中效果
实现方法：
使用平移属性实现双开门效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1336px;
height: 600px;
margin: 0 auto;
background: url(./picture/bg.jpg);
/* 超出盒子的部分隐藏 */
overflow: hidden;
}
/* 伪元素创建两个子级 */
.box::before,
.box::after {
float: left;
content: '';
width: 50%;
height: 600px;
background-image: url(./picture/fm.jpg);
/* 过渡 */
transition: all 0.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>2.2旋转
语法：
transform:rotate(角度)
角度单位deg
取值：正负均可
使用transform-oragin属性改变转换原点
默认圆点是盒子中心点
transform-oragin：原点水平位置 原点垂直位置
取值：
- 方位名词：left，top，right，bottom，center
- 像素单位数值
- 百分比（参照盒子自身尺寸计算）
2.3多重转换
多重转换：一个元素具有多个转换效果
transform复合属性：transform: translate() rotate();
📖Note：
- 复合属性的顺序不能颠倒，因为旋转会改变坐标轴的方向，导致位移的方向改变
- translate和rotate属性不能分开写，样式具有层叠性
2.4缩放
语法：
transform: scale(X轴缩放倍数，Y轴缩放倍数);
📖Note：
- 一般情况下，只为scale设置一个值，表示X轴和Y轴等比例缩放
- transform: scale(缩放倍数);
3.渐变
渐变：多个颜色逐渐变化的视觉效果
场景：一般用于设置盒子的背景
语法：
background-image: linear-gradient(
颜色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>
<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;
/* display: none; */
opacity: 0;
width: 300px;
height: 212px;
/* 透明到半透明 */
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
transition: all .5s;
}
.box:hover .mask {
opacity: 1;
/* display: block; */
}
</style>
</head>
<body>
<div class="box">
<img src="./picture/images/product.jpg" alt="">
<div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
<!-- 渐变背景 mask -->
<div class="mask"></div>
</div>
</body>
</html>
