通过C3实现基础动画效果

最新推荐文章于 2023-12-06 18:09:22 发布

Lauv-

最新推荐文章于 2023-12-06 18:09:22 发布

阅读量410

点赞数

文章标签：动画 css3 前端

本文链接：https://blog.csdn.net/m0_74086230/article/details/127176708

版权

动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

动画的定义和调用

<!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>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 调用动画  animation:动画名 动画执行时间*/
            animation: move 5s;
        }

        /* 定义动画 */
        @keyframes move {

            /* 开始状态 */
            form {
                transform: translate(0, 0);
            }

            /* 结束状态 */
            to {
                transform: translate(800px, 0);
            }
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>

或者是

<!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>
        .box{
            width: 300px;
            height: 300px;
            background-image: linear-gradient(pink,blue);
            border-radius: 50%;
            /* 调用动画  animation:动画名 动画执行时间 动画速度(linear匀速) 动画循环次数infinite(无限循环) 动画方向alternate forwards(停留在最后一帧)*/
            animation: move 30s linear alternate infinite ;
        }
        /* 定义动画 */

       @keyframes move {
        0%{
            transform: translate(0, 0);
        }
        20%{
            transform: translate(800px, 0) rotateZ(1turn);
        }
        40%{
            transform: translate(800px, 400px) rotateZ(1.1turn);
        }
        60%{
            transform: translate(0, 400px) rotateZ(1.5turn);
        }
        100%{
            transform: translate(0, 0) rotateZ(2turn);
        }
       }
       /* 注意点:动画可以写多个状态 多个状态通过百分比描述 状态相同只会执行一次 */
    </style>
</head>
<body>
    <div class="box">

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

动画的属性: