weixin_43832293 2018-12-11 14:55 采纳率: 75%
浏览 328

怎么把小球显示在打球的嘴里？

<style>
    .box{
        width:200px;
        height:200px;
        margin-top:200px;
        margin-left:200px;
        border-radius:50%;
        position:absolute;
        box-shadow:150px 0px 0px -80px red,300px 0px 0px -80px red,450px 0px 0px -80px red,600px 0px 0px -80px red,
                    750px 0px 0px -80px red,900px 0px 0px -80px red;
        animation:go3 1s infinite linear;
    }
    @keyframes go3{
        100%{
            box-shadow: 50px 0px 0px -80px red,
                        200px 0px 0px -80px red,
                        350px 0px 0px -80px red,
                        500px 0px 0px -80px red,
                        650px 0px 0px -80px red,
                        800px 0px 0px -80px red;
        }
    }
    .box-top{
        width:200px;
        height:100px;
        background-color:#FFFF00;
        border-radius:100px 100px 0px 0px;
        margin:0px;
        animation:go1 1s infinite;
    }
    @keyframes go1{
        0%{
            transform:rotate(0);
        }
        50%{
            transform:rotate(-30deg);
        }
        100%{
            transform:rotate(0);
        }
    }
    .box-bottom{
        width:200px;
        height:0px;
        background-color:#FFFF00;
        border-radius:0px 0px 100px 100px;
        padding-top:100px;
        animation:go2 1s infinite;
    }
    @keyframes go2{
        0%{
            transform:rotate(0deg);
        }
        50%{
            transform:rotate(30deg);
        }
        100%{
            transform:rotate(0deg);
        }
    }
    .box-eye{
        width:30px;
        height:30px;
        background-color:#FF0000;
        border-radius:50%;
        position:absolute;
        left:80px;
        top:30px;
    }
</style>
<body>
    <div class="box">
        <div class="box-top"></div>
        <div class="box-bottom"></div>
        <div class="box-eye"></div>
    </div>
</body>
</html>
  • 写回答

1条回答 默认 最新

  • ysm蓝色的天空 2018-12-13 03:29
    关注
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box{
                width:200px;
                height:200px;
                margin-top:200px;
                margin-left:200px;
                border-radius:50%;
                position:absolute;
            }

            .box-top{
                width:200px;
                height:100px;
                background-color:#FFFF00;
                border-radius:100px 100px 0px 0px;
                margin:0px;
                animation:go1 1s infinite;
            }
            @keyframes go1{
                0%{
                    transform:rotate(0);
                }
                50%{
                    transform:rotate(-30deg);
                }
                100%{
                    transform:rotate(0);
                }
            }
            .box-bottom{
                width:200px;
                height:0px;
                background-color:#FFFF00;
                border-radius:0px 0px 100px 100px;
                padding-top:100px;
                animation:go2 1s infinite;
            }
            @keyframes go2{
                0%{
                    transform:rotate(0deg);
                }
                50%{
                    transform:rotate(30deg);
                }
                100%{
                    transform:rotate(0deg);
                }
            }
            .box-eye{
                width:30px;
                height:30px;
                background-color:#FF0000;
                border-radius:50%;
                position:absolute;
                left:80px;
                top:30px;
            }
            .box-ball{
                width:2px;
                height:2px;
                border-radius:50%;
                position:absolute;
                right: 99px;
                top:99px;
                z-index: -1;
                box-shadow:150px 0px 0px 20px red,300px 0px 0px 20px red,450px 0px 0px 20px red,600px 0px 0px 20px red,
                            750px 0px 0px 20px red,900px 0px 0px 20px red;
                animation:go3 1s infinite linear;
            }
            @keyframes go3{
                100%{
                    box-shadow: 0px 0px 0px 20px red,
                                150px 0px 0px 20px red,
                                300px 0px 0px 20px red,
                                450px 0px 0px 20px red,
                                600px 0px 0px 20px red,
                                750px 0px 0px 20px red;
                }

            }
        </style>
    </head>

<body>
    <div class="box">
        <div class="box-top"></div>
        <div class="box-bottom"></div>
        <div class="box-eye"></div>
        <div class="box-ball"></div>
    </div>
</body>
</html>
    评论

报告相同问题？

悬赏问题

  • ¥20 双层网络上信息-疾病传播
  • ¥50 paddlepaddle pinn
  • ¥20 idea运行测试代码报错问题
  • ¥15 网络监控：网络故障告警通知
  • ¥15 django项目运行报编码错误
  • ¥15 请问这个是什么意思？
  • ¥15 STM32驱动继电器
  • ¥15 Windows server update services
  • ¥15 关于#c语言#的问题：我现在在做一个墨水屏设计，2.9英寸的小屏怎么换4.2英寸大屏
  • ¥15 模糊pid与pid仿真结果几乎一样