jello

MysTic_

于 2023-05-07 16:03:57 发布

阅读量55

点赞数

文章标签：动画前端 css3

本文链接：https://blog.csdn.net/MysTic_/article/details/129789475

版权

<!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>
            @keyframes jello {
                from,
                11.1%,
                to {
                    transform: translate3d(0, 0, 0);
                }

                22.2% {
                    transform: skewX(-12.5deg) skewY(-12.5deg);
                }

                33.3% {
                    transform: skewX(6.25deg) skewY(6.25deg);
                }

                44.4% {
                    transform: skewX(-3.125deg) skewY(-3.125deg);
                }

                55.5% {
                    transform: skewX(1.5625deg) skewY(1.5625deg);
                }

                66.6% {
                    transform: skewX(-0.78125deg) skewY(-0.78125deg);
                }

                77.7% {
                    transform: skewX(0.390625deg) skewY(0.390625deg);
                }

                88.8% {
                    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
                }
            }
            .box {
                animation-name: jello;
                animation-duration: 1s;
            }
        </style>
    </head>
    <body>
        <div class="box" style="width: 100px; height: 100px; border: 1px solid skyblue"></div>
    </body>
</html>