css3+html5——跳动的气球

最新推荐文章于 2024-04-13 17:48:22 发布

十二Tel

最新推荐文章于 2024-04-13 17:48:22 发布

阅读量2.7k

点赞数 6

本文链接：https://blog.csdn.net/weixin_42426348/article/details/80655029

版权

先提供一张.png格式气球的图片：

效果图如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跳动的气球</title>
    <style type="text/css">
        img{
            display: inline-block;
        }
        .goods{
            width: 50%;/*永远保证在中间位置*/
            text-align: center;
            /*background: magenta;*/
            margin: 50px auto;
        }
        .goods img{
            animation: jump 2s infinite;
        }
        @keyframes jump{
            0%{
                transform: translate(0px,0px);
            }
            50%{
                transform: translate(0px,-30px);/*往Y轴方向跳动*/
            }
            100%{
                transform: translate(0px,0px);
            }
        }
        .circular{
            width: 200px;
            height:50px;
            position: relative;
            margin-top: -10px;
            margin-left: 70px;
            border-radius: 50%;
            background: dodgerblue;
            box-shadow: 0px 9px 0px rgba(144,144,144,1), 0px 9px 25px rgba(0,0,0,.7);/*阴影*/

        }
    </style>
</head>
<body>
    <div class="goods">
        <img src="../img/balloon.png" alt="" width="200" height="220">
        <div class="circular"></div>
    </div>
</body>
</html>