移动端Web第一天知识点
平面位移
transform: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>Document</title>
<style>
.father{
position: relative;
width: 400px;
height: 300px;
margin:0 auto;
border: 1px solid red;
}
.son{
position: absolute;
left:50%;
top:50%;
width: 200px;
height: 100px;
/* margin-left: -100px; */
/* margin-right: -50px; */
transform:translate(-50%,-50%);
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
效果图
transform实现元素位移效果
语法：transform:translate(水平移动距离，垂直移动距离);
取值：（正负均可） 注意：X轴正向为右，Y轴正向为下
像素单位数值
百分比
技巧：
translate();如果只给出一个值，表示x轴方向移动距离
单独设置某个方向的移动距离：translate() & trranslateY():
使用translate快速实现绝对定位的元素居中效果
position;absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
背景图片定位 background-psition:right;
left：向左侧移动自身宽度
right：向右侧移动自身宽度
transform:translate();
transform-rotate旋转
注意：角度单位是deg
技巧：取值正负均可
取值为正，则顺时针旋转
取值为负，则逆时针旋转
transform:rotate(360deg);
transform:rotate(-360deg);
transform复合属性
transfomr:translate() rotate():
transfomr:scale(缩放比例);
scale值大于1表示放大，scale值小于1表示缩小
transform:translate(-50%,-50e()r%) scale(5)；
transform:translale() scale（）;
渐变
-
渐变是个多个颜色逐渐变化的视觉效果
-
一般用于设置盒子的背景
background-image:lin background-image: linear-gradient(to top,rgba(0,0,0,.8),transparent 50%);er-gradient(颜色1，颜色2);
background-image:linear-gradient(transparent,rgba(0,0,0,.6);
字体图标、平面转换、动画等，丰富网页效果和呈现方式
background-image: linear-gradient(to top,rgba(0,0,0,.8),transparent 50%);
