20210920222225.gif
动画使用了H5+jQuery实现

代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 732px;
            height: 733px;
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            border-radius: 100px;
            overflow: hidden;
            border-radius: 400px;
        }
        
        .cont {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .cont img {
            position: absolute;
        }
        
        .xing {
            top: 200px;
        }
        
        .ting {
            bottom: -280px;
            left: 20px;
        }
        
        .hua {
            right: -408px;
            top: 200px;
        }
        
        .tu {
            right: -294px;
            bottom: 0px;
        }
        
        .yun {
            left: -470px;
        }
        
        .yun2 {
            left: -425px;
            bottom: 0px
        }
    </style>
    <script src="https://xxhzm.cn/jq.js"></script>
    <script>
        $(function() {
            setInterval(() => {
                //星星
                $('.xing').fadeTo('slow', 0);
                $('.xing').fadeTo('slow', 1);
                //亭子
                $('.ting').animate({
                    'bottom': '150px'
                }, 2000);
                $('.haiou').animate({
                    'left': '270px',
                    'top': '240px'
                }, 2000);
                $('.hua').animate({
                    'top': '50px',
                    'right': '0px'
                }, 2000);
                $('.tu').animate({
                    'right': '0px'
                }, 2000);
                $('.yun').animate({
                    'top': '50px',
                    'left': '0px'
                }, 2000);
                $('.yun2').animate({
                    'left': '0px'
                }, 2000);
            }, 1000);

        })
    </script>
</head>

<body>
    <div class="container">
        <img src="https://xxhzm.cn/wj/upload/yue.png">
        <div class="cont">
            <img src="https://xxhzm.cn/wj/upload/ting.png" class="ting">
            <img src="https://xxhzm.cn/wj/upload/haiou.png" class="haiou">
            <img src="https://xxhzm.cn/wj/upload/hua.png" class="hua">
            <img src="https://xxhzm.cn/wj/upload/tu.png" class="tu">
            <img src="https://xxhzm.cn/wj/upload/yun.png" class="yun">
            <img src="https://xxhzm.cn/wj/upload/yun2.png" class="yun2">
            <img src="https://xxhzm.cn/wj/upload/xing.png" class="xing">
        </div>
    </div>
</body>

</html>


下载地址:
此处内容需要评论回复后(审核通过)方可阅读。

最后修改:2021 年 09 月 20 日 10 : 28 PM
如果觉得我的文章对你有用,请随意赞赏