# 3 网页实现吃豆子动画

最新推荐文章于 2024-10-29 10:16:49 发布

Rainbow-彩虹桥

最新推荐文章于 2024-10-29 10:16:49 发布

阅读量167

点赞数 1

分类专栏： Web前端基础知识文章标签：动画 html5 html

本文链接：https://blog.csdn.net/m0_51553630/article/details/120326714

版权

Web前端基础知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这个博客展示了一个使用HTML5和CSS3创建的吃豆子动画效果。通过CSS3的box-shadow和关键帧动画，实现了豆子在页面上移动的视觉效果。同时，配合两个圆形元素的旋转动画，营造出类似游戏场景的动态感。

摘要由CSDN通过智能技术生成

<!doctype html>
<hrml>
    <html lang="zh-CN">
        <head>
            <meta charset="utf-8">
            <title style="color:rgb(12, 22, 31)"> ## 吃豆子动画 ##</title>
            <style>
                body{
                    background-color:black;
                }
                
                .bean{
                    height: 200px;
                    width: 200px;
                    background-color:black;
                    border-radius:150px 150px 150px 150px;
                    box-shadow: 
                    150px  -250px 0px -80px green,
                    300px  -250px 0px -80px green,
                    450px  -250px 0px -80px green,
                    600px  -250px 0px -80px green;
                    animation: bea-move 1.5s infinite;
                }
                @keyframes bea-move{
                    0% {
                        box-shadow: 
                    150px  -250px 0px -80px green,
                    300px  -250px 0px -80px green,
                    450px  -250px 0px -80px green,
                    600px  -250px 0px -80px green;
                    }
                    100% {
                        box-shadow: 
                    0px  -250px 0px -80px green,
                    150px  -250px 0px -80px green,
                    300px  -250px 0px -80px green,
                    450px  -250px 0px -80px green;
                    }
                }
                .a1-circle{
                    height: 150px;
                    width: 300px;
                    margin-top:15px;
                    background-color: aqua;
                    border-radius:150px 150px 0 0;
                    transform:rotate(0deg);
                    animation: top  1.5s infinite;
                }
                @keyframes top{
                    0% {transform:rotate(0deg);}
                    50% {transform:rotate(-30deg);}
                    100% {transform:rotate(0deg);}
                }
                .a2-circle{
                    height: 150px;
                    width: 300px;
                    background-color:aqua;
                    border-radius: 0 0 150px 150px;
                    transform: rotate(30deg);
                    animation: bottom 1.5s infinite;

                }
                @keyframes bottom{
                    0% {transform:rotate(0deg);}
                    50% {transform:rotate(30deg);}
                    100% {transform:rotate(0deg);}
                }
            </style>
        </head>
        <body>
            <h1 style="color: beige;"> 吃豆子动画</h1>
            <p style="color: beige;"> 测试动画</p>
            <hr>
            <div class="a1-circle"> </div>
            <div class="a2-circle"></div>
            <div class="bean"> </div>
        <script type="text/javascript">
        </script>
        </body>
    </html>