前端Web开发HTML5+CSS3——平面转换、渐变、空间转换、动画

于 2023-12-24 15:36:57 发布
阅读量58 收藏
点赞数
分类专栏： 前端 文章标签： 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45594736/article/details/135005687
版权

系列文章目录

第一章 前端Web开发HTML5+CSS3——定位、精灵图、字体图标和修饰属性

第二章 前端Web开发HTML5+CSS3——小兔鲜儿首页

第三章 前端Web开发HTML5+CSS3——平面转换、渐变、空间转换、动画

1. 平面转换

  • 作用：为元素添加动态效果，一般与过渡配合使用
  • 概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
  • 平面转换又叫2D转换
<!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>
        div {
            margin: 100px 0;

            width: 100px;
            height: 100px;
            background-color: blue;

            transition: all 1s;
        }

        /* 鼠标滑过，添加动态效果 */
        div:hover {
            transform: translate(800px) rotate(360deg) scale(2);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

1.1 平移

  • 属性：transform: translate(x轴移动距离，y轴移动距离);
  • 取值
    • 像素单位数值
    • 百分比（参照盒子自身尺寸计算结果）
    • 正负均可
  • 技巧
    • translate()只写一个值，表示沿着x轴移动
    • 单独设置x或y轴移动距离，translateX()或translateY()
<!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>
        .father {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }

        .son {
            width: 200px;
            height: 100px;
            background-color: blue;
            transition: all 0.5s;
        }

        /* 鼠标移动到父盒子，son改变位置 */
        .father:hover .son {
            /* transform: translate(200px, 100px); */
            /* 取值是百分比，取值参照盒子自身尺寸计算结果 */
            /* transform: translate(50%, 100%); */
            /* translate()只写一个值，表示沿着x轴移动 */
            /* transform: translate(100px); */
            transform: translateY(100px);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

（1）平移实现居中效果

position: absolute;
left: 50%;
top: 50%;
/* 向左、向上平移自身的一半 */
transform: translate(-50%, -50%);

（2）双开门效果

  1. 布局：父子结构，父级是大图，子级是左右小图
  2. 鼠标悬停的效果：左右移动 
<!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;
        }

        .father {
            display: flex;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            background-color: blue;
            overflow: hidden;
        }

        .father .left,
        .father .right {
            width: 250px;
            height: 300px;
            background-color: wheat;

            transition: all 0.5s;
        }

        .father:hover .left {
            transform: translate(-100%);
        }

        .father:hover .right {
            transform: translate(100%);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

1.2 旋转

  • 属性：transform: rotate(旋转角度);
  • 取值：角度单位是deg
  • 技巧
    • 取值正负均可
    • 取值为正，顺时针旋转
    • 取值为负，逆时针旋转

1.3 改变转换原点

默认情况下，转换原点是盒子中心点

  • 属性：transform-origin: 水平原点位置 垂直原点位置;
  • 取值：
    • 方位名词（left、top、right、bottom、center）
    • 像素单位数值
    • 百分比

1.4 多重转换

  • 先平移再旋转：transform: translate(x轴移动距离，y轴移动距离) rotate(旋转角度);
  • 原因：旋转会改变坐标轴向，多重转换以第一种转换形态的坐标轴为准
  • 拆开写时，效果具有层叠性，只有最新的生效

1.5 缩放

  • 修改宽高尺寸进行缩放，会从左上角进行变化
  • 属性：transform: scale(缩放倍数);     transform: scale(x轴缩放倍数，y轴缩放倍数);
  • 技巧：
    • 通常，只为scale设置一个值，表示x轴和y轴等比例缩放
    • 取值大于1表示放大，取值小于1表示缩小

1.6 倾斜

  • 属性：transform: skew();
  • 取值：
    • 角度度数deg
    • 正负均可
    • 正--向右倾斜，负--向左倾斜

2. 渐变

  • 渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景
  • 分类
    • 线性渐变
    • 径向渐变--同心圆

2.1 线性渐变

  • 属性：

backgrround-image: linear-gradient(

        渐变方向,

        颜色1 终点位置,

        颜色2 终点位置,

        ......

)

  •  取值
    • 渐变方向：可选 默认从上到下
      • to 方位名词
      • 角度度数
    • 终点位置：可选 默认50%
      • 百分比

2.2 径向渐变

  • 作用：给按钮添加高光效果
  • 属性：

backgrround-image: radial-gradient(

        半径 at 圆心位置,

        颜色1 终点位置,

        颜色2 终点位置,

        ......

)

  •  取值
    • 半径可以是2条，则为椭圆
    • 圆心位置取值：像素单位数值、百分比、方位名词

3. 空间转换

  • 空间：是从坐标轴角度定义的X、Y和Z三条坐标轴构成了一个立体空间，Z轴位置与视线方向相同。
  • 空间转换也叫3D转换
  • 属性：transform

transform: translate3d(x, y, z);   /*必须逗号隔开三个数*/

transform: translateX();

transform: translateY();

transform: translateZ();

  • 取值（正负均可）：
    • 像素单位数值
    • 百分比（参照盒子自身尺寸计算结果）

3.1 视距 perspective

  • 默认状态下，无法观察到Z轴平移效果。
  • 作用：指定了观察者与z=0平面的距离，为元素添加透视效果
  • 透视效果：近大远小，近实远虚
  • 属性（添加给直接父级，建议取值范围800-1200）：

perspective: 视距;

 3.2 旋转

配合视距一起使用

transform: rotateZ(值); /*和平面旋转效果一样*/

transform: rotateX(值);

transform: rotateY(值);

  • 左手法则-根据旋转方向确定取值正负
    • 左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向

拓展（简单认识）

rotate3d(x，y，z，角度度数) /*用来设置自定义旋转轴的位置及旋转的角度*/

  • x，y，z取值为0-1之间的数字

3.3 立体呈现 transform-style

  • 呈现立体图形步骤
    • 父元素添加transform-style: preserve-3d;
    • 子级定位
    • 调整子盒子的位置（位移或旋转）

案例：立体导航

  1. 搭建立方体：绿色是立方体的前面，橙色是立方体的上面
  2. 添加鼠标悬停的旋转效果
<!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;
        }

        li {
            list-style: none;
        }

        .nav {
            margin: 100px auto;
        }

        .nav ul {
            display: flex;
        }

        .nav li {
            position: relative;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all 0.5s;
            transform-style: preserve-3d;

            /* transform: rotateX(-20deg) rotateY(-20deg); */
        }

        .nav li a {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100px;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }

        .nav li a:first-child {
            transform: translateZ(20px);
            background-color: green;
        }

        .nav li a:last-child {
            transform: rotateX(90deg) translateZ(20px);
            background-color: orange;
        }

        .nav li:hover {
            transform: rotateX(-90deg);
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">登录</a>
                <a href="#">Login</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">Register</a>
            </li>
        </ul>
    </div>
</body>

</html>

3.4 缩放

  • 属性

transform: scale3d(x, y, z);

transform: scaleX();

transform: scaleY();

transform: scaleZ();

 4. 动画

  • 过渡：实现两个状态间的变化过程
  • 动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

4.1 实现步骤

        1.定义动画

@keyframes 动画名词 {

        from {}

        to {}

} 

@keyframes 动画名词 {

        0% {}

        10% {}

        ......

        100% {}

}

        2.使用动画

animation: 动画名词 动画花费时长;

<!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>
        .box {
            width: 200px;
            height: 100px;
            background-color: blue;

            animation: change 1s;
        }

        /* 动画一：宽度从200变化到800 */
        /* @keyframes change {
            from {
                width: 200px;
            }

            to {
                width: 800px;
            }
        } */

        /* 动画2：从200*100 变化到 300*300 变化到800*500 */
        /* 百分比是动画时长的百分比 */
        @keyframes change {
            0% {
                width: 200px;
                height: 100px;
            }

            50% {
                width: 300px;
                height: 300px;
            }

            100% {
                width: 800px;
                height: 500px;
            }
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>

 4.2 animation

复合属性

animation：动画名词 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

提示：

  • 动画名词和动画时长必须赋值
  • 取值不分先后顺序
  • 如果有两个时间值，第一个表示动画时长，第二个时间表示延迟时间
  • 速度曲线：
    • linear 匀速
    • steps() 分布动画，配合精灵图实现精灵动画
  • 重复次数：
    • 数字  重复几次
    • infinite 无限循环
  • 动画方向
    • alternate：反向
  • 执行完毕时状态
    • forwards：停留在结束状态
    • backwords：停留在开始状态 默认

拆分属性

案例：走马灯效果

  • 无缝动画原理：复制开头图片到结尾位置（图片累加宽度=区域宽度）
<!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-sizing: border-box;
        }

        li {
            list-style: none;
        }

        img {
            display: block;
            width: 200px;
        }

        .box {
            width: 600px;
            height: 98px;
            border: 5px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }

        .box ul {
            display: flex;
            /* overflow: hidden; */

            animation: move 6s infinite linear;
        }

        .box:hover ul {
            animation-play-state: paused;
        }

        /* 定义位移动画，ul使用动画，鼠标悬停暂停动画 */
        @keyframes move {
            0% {
                transform: translate(0);
            }

            100% {
                transform: translate(-1200px);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li><img src="./images/logo1.png" alt=""></li>
            <li><img src="./images/logo2.png" alt=""></li>
            <li><img src="./images/logo3.png" alt=""></li>
            <li><img src="./images/logo4.png" alt=""></li>
            <li><img src="./images/logo5.png" alt=""></li>
            <li><img src="./images/logo6.png" alt=""></li>
            <!-- 替身：填补露白区域 -->
            <li><img src="./images/logo1.png" alt=""></li>
            <li><img src="./images/logo2.png" alt=""></li>
            <li><img src="./images/logo3.png" alt=""></li>
        </ul>
    </div>
</body>

</html>

4.3 逐帧动画

 精灵动画核心原理：

  • steps()逐帧动画
  • CSS精灵图

精灵动画制作步骤

  1. 准备显示区域：盒子尺寸与一张精灵小图尺寸相同
  2. 定义动画：移动背景图（移动距离=精灵图宽度）
  3. 使用动画：steps(N) N与精灵小图个数相同
<!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>
        div {
            width: 140px;
            height: 140px;
            border: 1px solid #000;
            background-image: url(./images/sprite.png);

            animation: run 1s steps(12) infinite;
        }

        @keyframes run {
            form {
                background-position: 0 0;
            }

            to {
                background-position: -1600px 0;
            }
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

</html>

4.4 多组动画

animation:

        动画1，

        动画2，

        动画N

;

animation:

        run 1s steps(12) infinite,

        move 3s forwards

; 

阿斑学习了吗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值