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

博主： literature
发布时间：2023 年 08 月 27 日
123 次浏览
关闭评论
2179字数
分类：主机教程

动画使用了H5+jQuery实现

代码





    
    
    
    Document

下载地址:

此处内容需要评论回复后（审核通过）方可阅读。

最后修改：2023 年 08 月 27 日

如果觉得我的文章对你有用，请随意赞赏

此处评论已关闭

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

literature • 2023 年 08 月 27 日

<p><img src="https://www.xxhzm.cn/usr/uploads/2021/09/1367403599.gif" alt="20210920222225.gif" title="20210920222225.gif" style="" data-original="https://www.xxhzm.cn/usr/uploads/2021/09/1367403599.gif" class="aligncenter"style=""><br />动画使用了H5+jQuery实现<br /></p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-6038f91be24c534821316388e82a636914" aria-expanded="true"><div class="accordion-toggle"><span style="">代码</span><br />
<i class="pull-right fontello icon-fw fontello-angle-right"></i></div></div><div class="panel-body collapse-panel-body"><div id="collapse-6038f91be24c534821316388e82a636914" class="collapse collapse-content"><p></p><p></p><pre><code><!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://www.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>

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

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

live/msn等微软绝版邮箱详细的注册教程

欢迎使用 Typecho

一个功能强大又好用的RSS订阅器：FreshRSS安装教程

VPS使用BaiduPCS-Go高速下载百度网盘的文件，支持上传/离线下载等操作

使用Caddy申请免费的Let’s Encrypt泛域名SSL证书

Windows安装mysql

宝塔面板LNMP开启Brotli压缩，可提高网站加载速度

青龙面板2.10.13稳定版安装及配置-主机教程

NOIP初赛知识点总结

VSCode绕开腾讯云COS防盗链 | Markdown魔改过程

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