移动Web第一章-CSDN博客

B站《前端Web开发HTML5+CSS3+移动web视频教程》第十一天课程学习：Web移动端，平面转换、渐变

一、平面转换`transform`

作用：为元素添加动态效果，一般配合过渡使用
概念：改变盒子在平面的形态（位移、旋转、缩放、倾斜）

1.平面转换-平移

（1）属性：transform:translate(X轴移动距离,Y轴移动距离);
（2）取值
①像素单位数值
②百分比（参照盒子自身尺寸数值计算结果）
③正负均可
（3）技巧
①translate()只写一个值，表示沿着X轴移动
②单独设置X或Y轴移动距离，translateX()或translateY()

2.平面转换—旋转

（1）属性：transform:rotate(旋转角度）
角度单位是deg
（2）技巧
①取值正负均可
②取值为正，顺时针旋转
③取值为负，逆时针旋转
（3）改变转换原点
默认情况下，转换原点是盒子的中心点
①属性：transform-origin：水平原点位置垂直原点位置
②取值
方位名词（left、top、right、bottom、center）
像素单位数值
百分比

3.多重转换

（1）技巧：先平移在旋转
（2）属性：transform: translate() rotate();
（3）注意：以第一种转换形态的坐标轴为准，如果先写了旋转属性，旋转会改变坐标轴向
如果两个属性拆开写，属性之间会层叠，不会实现理想的效果

4.平面转化—缩放

（1）属性
①transform：scale(缩放倍数）
②transform：scale(X轴缩放倍数，Y轴缩放倍数)
（2）技巧：
通常只为scale设置一个值，表示X轴和Y轴等比例缩放；取值大于1表示放大，取值小于1表示缩小

5.平面转换—倾斜

（1）属性：transform：skew();
（2）取值：角度度数deg

二、渐变

渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景

1.线性渐变

（1）属性：
在这里插入图片描述（2）取值
①渐变方向：默认从上到下
to 方位名词
角度度数
②重点位置：默认从中间开始
百分比

2.径向渐变

（1）作用：给按钮添加高光效果
（2）属性：
在这里插入图片描述（3）取值
①半径可以是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>
        * {
            margin:0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 布局：父子级，一个大的背景图，里面左右两个盒子 */
        .father {
            display: flex;
            margin: 0 auto;
            width: 1366px;
            height: 600px;
            background-image: url("./images/bg.jpg");
            overflow: hidden;
        }
        .father .left,
        .father .right {
            width: 50%;
            height: 600px;
            background-image: url("./images/fm.jpg");

            transition: all 1s;
        }
        .father .right {
            /* background-position: -683px 0; */

            /* 取到精灵图右边的位置 */
            background-position: right 0;
        }
        /* 鼠标悬停之后的动态效果 */
        .father:hover .left {
            transform: translateX(-100%);
        }
        .father:hover .right {
            transform: translateX(100%);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    
</body>
</html>