吃豆豆动画

最新推荐文章于 2024-11-12 22:56:44 发布

小帅哥哥001

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量130

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_40623562/article/details/126338390

版权

<style>
    .qq {
        width: 100px;
        height: 50px;
        margin-left: 150px;
        background: red;
        border-top-left-radius: 100px;
        border-top-right-radius: 100px;
        animation: q 1s linear infinite alternate;

    }

    .ww {
        width: 100px;
        height: 50px;
        margin-left: 150px;
        background: red;
        border-bottom-left-radius: 100px;
        border-bottom-right-radius: 100px;
        animation: w 1s linear infinite alternate;
    }

    @keyframes q {
        0% {
            transform-origin: 50px;
            transform: rotate(-10deg)
        }


        100% {
            transform-origin: 50px;
            transform: rotate(0deg)
        }
    }

    @keyframes w {
        0% {
            transform-origin: 50px;
            transform: rotate(10deg)
        }


        100% {
            transform-origin: 50px;
            transform: rotate(0deg)
        }
    }

    .ee {
        width: 100px;
        height: 100px;
        border-radius: 50%;

        animation: xz 1000ms linear infinite;

        /* transform: scale(0.3) */
    }

    @keyframes xz {
        0% {

            box-shadow: 250px 0px 0px -40px blue,
                350px 0px 0px -40px blue,
                450px 0px 0px -40px blue,
                550px 0px 0px -40px blue;
        }


        100% {
            box-shadow: 150px 0px 0px -40px blue,
                250px 0px 0px -40px blue,
                350px 0px 0px -40px blue,
                450px 0px 0px -40px blue;
        }
    }
</style>

<div class="ee">
    <div class="qq"></div>
    <div class="ww"></div>
</div>