css动画

最新推荐文章于 2025-11-24 21:21:07 发布

原创最新推荐文章于 2025-11-24 21:21:07 发布 · 89 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #javascript

uni-app 同时被 3 个专栏收录

33 篇文章

订阅专栏

微信小程序

28 篇文章

订阅专栏

CSS动画

5 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .row {
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 100px;
    }

    .row:hover {
        animation: nex_dance_jump 1.1s alternate;
    }

    @keyframes nex_dance_jump {
        0% {
            transform: translate(0)
        }

        10% {
            transform: translateY(5px) scaleX(1.2) scaleY(.8)
        }

        30% {
            transform: translateY(-13px) scaleX(1) scaleY(1) rotate(5deg)
        }

        50% {
            transform: translateY(0) scale(1) rotate(0)
        }

        55% {
            transform: translateY(0) scaleX(1.1) scaleY(.9) rotate(0)
        }

        70% {
            transform: translateY(-4px) scaleX(1) scaleY(1) rotate(-2deg)
        }

        80% {
            transform: translateY(0) scaleX(1) scaleY(1) rotate(0)
        }

        85% {
            transform: translateY(0) scaleX(1.05) scaleY(.95) rotate(0)
        }

        to {
            transform: translateY(0) scaleX(1) scaleY(1)
        }
    }
</style>

<body>


    <div class="row"></div>

</body>

</html>