元素的动画-CSDN博客

本文链接：https://blog.csdn.net/zkq5168/article/details/132286425

博客介绍了HTML通过转换和位移实现动画。转换即改变元素位置、大小等，分2D和3D转换。CSS中用transform属性实现，其属性值为函数。通过例子展示了元素的位移、旋转、缩放效果，还指出transform属性函数可混合使用，执行顺序从右到左，顺序不同效果不同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML的动画是通过转换和位移来实现的，接下来我们

一、转换

转换（transform），也称变形。就是改变元素在页面中的位置，大小，角度以及形状。

转换分为2d和3d转换

2d转换指仅在x轴和y轴形成的平面内发生的转换
请添加图片描述
3d转换指在x轴、y轴和z轴组成的3维空间中发生的转换

在css中的转换属性是用transform，格式如下

transform: translate/rotate/scale

注意上述的属性值都是函数

函数	用法
translate(x, y)	位移距离:x参数表示x轴方向的距离，y参数表示y轴方向的距离
rotate(deg)	元素旋转，参数是度数，顺时针正数，逆时针负数
scale(x, y)	元素缩放，x轴方向的缩放系数，y轴方向的缩放系数

接下来通过一些例子来看一下

<!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>
        html, body{
            height: 100%;
        }
        body{
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: #e176f1;
            transition: 1s;
        }
        .box:hover{
            transform: translate(-120px, -120px);
            transition: 1s;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

效果
请添加图片描述
上述例子就是鼠标移入元素时会让元素想左移动120px，向上移动120px

旋转例子

<!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>
        html, body{
            height: 100%;
        }
        body{
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: #e176f1;
            transition: 2s;
        }
        .box:hover{
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果
请添加图片描述
上述效果实现鼠标移入元素时触发元素的旋转，正数顺时针，负数逆时针

缩放

<!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>
        html, body{
            height: 100%;
        }
        body{
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: #e176f1;
            transition: 1s;
        }
        .box:hover{
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果
请添加图片描述
上图效果实现鼠标移入元素时触发元素的缩放效果

另外transform属性的函数可以混合使用，让我们看一下把transform的属性改为如下

transform: translateX(300px) rotate(200deg);

效果
请添加图片描述
然后我们把transform属性的函数进行调换

transform: rotate(200deg) translateX(300px);

效果
请添加图片描述
我们会看到属性值的顺序会引起不一样的效果，这里我们总结一下，transform属性的执行顺序是从右到左依次执行，比如第一个组合就是先触发旋转动作，再触发位移动作，第二个是先触发位移动作，再触发旋转动作，所以最终的效果不同