CSS实现吃豆豆效果

最新推荐文章于 2023-06-28 09:46:27 发布

么心么肺

最新推荐文章于 2023-06-28 09:46:27 发布

阅读量534

点赞数 1

分类专栏： CSS+CSS3

本文链接：https://blog.youkuaiyun.com/weixin_41545048/article/details/107413126

版权

CSS+CSS3 专栏收录该内容

7 篇文章

订阅专栏

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>吃豆豆</title>
</head>

<style>
    body {
        background-color: rgb(19, 18, 18);
    }
    
    div {
        /* background-color: aqua; */
        width: 200px;
        height: 200px;
        margin-top: 100px;
        border-radius: 100px;
        box-shadow: 300px 0 0 -75px aqua, 450px 0 0 -75px aqua, 600px 0 0 -75px aqua, 750px 0 0 -75px aqua;
        animation: peas 1s infinite;
    }
    
    div:before,
    div:after {
        content: "";
        display: block;
        width: 200px;
        height: 100px;
        background-color: yellow;
        margin-left: 150px;
    }
    
    div:before {
        border-radius: 100px 100px 0 0;
        transform: rotate(-25deg);
        animation: mouthTop 1s infinite;
    }
    
    div:after {
        border-radius: 0 0 100px 100px;
        transform: rotate(25deg);
        animation: mouthbottom 1s infinite;
    }
    
    @keyframes mouthTop {
        0% {
            transform: rotate(0deg)
        }
        50% {
            transform: rotate(-25deg);
        }
        100% {
            transform: rotate(0deg);
        }
    }
    
    @keyframes mouthbottom {
        0% {
            transform: rotate(0deg)
        }
        50% {
            transform: rotate(25deg);
        }
        100% {
            transform: rotate(0deg);
        }
    }
    
    @keyframes peas {
        0% {
            box-shadow: 300px 0 0 -75px aqua, 450px 0 0 -75px aqua, 600px 0 0 -75px aqua, 750px 0 0 -75px aqua;
        }
        100% {
            box-shadow: 150px 0 0 -75px aqua, 300px 0 0 -75px aqua, 450px 0 0 -75px aqua, 600px 0 0 -75px aqua;
        }
    }
</style>

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

</html>