祝大家中秋节快乐！给大家送上中秋节小动画。

2021 年 09 月 21 日

1727 次浏览

3467字数

<p><img src="https://www.xxhzm.cn/usr/uploads/2021/09/1367403599.gif" alt="20210920222225.gif" title="20210920222225.gif"style=""><br>动画使用了H5+jQuery实现<br><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-256493cca6cb7b26bc5827bf3b6ebd1251" aria-expanded="true"><div class="accordion-toggle"><span style="">代码</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-256493cca6cb7b26bc5827bf3b6ebd1251" class="collapse collapse-content"><p></p></p><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
        .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
        }
    &lt;/style&gt;
    &lt;script src=&quot;https://www.xxhzm.cn/jq.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        $(function() {
            setInterval(() =&gt; {
                //星星
                $('.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);

})
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;img src=&quot;https://www.xxhzm.cn/wj/upload/yue.png&quot;&gt;
        &lt;div class=&quot;cont&quot;&gt;
            &lt;img src=&quot;https://www.xxhzm.cn/wj/upload/ting.png&quot; class=&quot;ting&quot;&gt;
            &lt;img src=&quot;https://www.xxhzm.cn/wj/upload/haiou.png&quot; class=&quot;haiou&quot;&gt;
            &lt;img src=&quot;https://www.xxhzm.cn/wj/upload/hua.png&quot; class=&quot;hua&quot;&gt;
            &lt;img src=&quot;https://www.xxhzm.cn/wj/upload/tu.png&quot; class=&quot;tu&quot;&gt;
            &lt;img src=&quot;https://www.xxhzm.cn/wj/upload/yun.png&quot; class=&quot;yun&quot;&gt;
            &lt;img src=&quot;https://www.xxhzm.cn/wj/upload/yun2.png&quot; class=&quot;yun2&quot;&gt;
            &lt;img src=&quot;https://www.xxhzm.cn/wj/upload/xing.png&quot; class=&quot;xing&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre><p><p></p></div></div></div><br>下载地址:<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div></p>