【2D动画和过渡】

最新推荐文章于 2024-10-05 09:05:35 发布

晚风不如你

最新推荐文章于 2024-10-05 09:05:35 发布

阅读量149

点赞数 2

文章标签：动画 html5 css3

本文链接：https://blog.csdn.net/love_me06/article/details/126707554

版权

仅代表个人理解和认知

过渡是和动画结合使用的尤其是二D动画不然就看不出，动画是如何变形的。

先说动画

transform是属性前缀有（自我理解是这个意思，也可以理解为我要告诉浏览器这个box或者图片要要开始变形了，后面的具体属性就是告诉box或者图片要变成什么样子）

transform：translate（px px）；平移（移动的距离第一个轴y第二个x）也可以在translate后加大写的X Y Z 来表示向什么轴来位移

transform：rotate旋转（不能写像素得写角度deg）

transform：scale缩放（只能写倍数1是正常状态，可大可小）

transform：skew倾斜（可以写角度不能写像素可以写俩个角度一个是x轴y轴）

transform：matrix矩阵（有六个值用逗号隔开）这个东西稍微有点高深没有太理解，得要什么函数来算。

过渡transition

transition-property：指定要执行过渡的属性如果有多个属性用逗号间隔开，大部分属性都支持过渡效果必须是有效值向另一个有效值来过渡比如auto向0过渡就不行。

transition-duration:指过渡效果的持续时间单位是s和ms 1s=1000ms，可以分别指定时间transition-duration: 100ms,2s

.transition-timing-function:过渡的时序函数指定过渡的执行的方式就是变形的过程是如何

ease默认值从慢速开始，先加速再减速

linear匀速运动

ease-in加速运动

减速运动ease-out

先加速再减速ease-in-out

cubic-bezier（0，。5，。97，-0，31）用贝赛尔曲线来指定时序函数（这个不是太常用）

分步steps(3)可以设置一个第二个值，end在时间结束时执行过渡（默认值）例：steps(3,end)，start在时间开始时执行过程

transition-delay：过渡效果的延迟，等待一段时间后在执行过渡

transition:可以同时设置过度相关的所有属性,只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟。例如：transition: all 2s ；就ok

需要组合起来

代码实现（视频得审核不会整动图见谅）

<!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>
    <link rel="stylesheet" href="css01.css">
    <style>
        .box1 {
            /* 设置背景盒子宽高 */
            width: 200px;
            height: 200px;
            /* 设置背景盒子的背景色 */
            background-color: blue;
            /* 使得这个盒子居中 */
            margin: 0 auto;
        }
        .box11 { 
             /* 设置位移盒子宽高 */
            width: 200px;
            height: 200px;
            /* 设置位移盒子背景色 */
            background-color: brown;
        }
        .box11:hover {
            /* 平移的位置 */
            transform: translate(30px, 30px);
            /* 过渡 */
            transition: all 1s;
          
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box11">平移</div>
    </div>
</body>

</html>