jquer简单表白动画

最新推荐文章于 2022-06-19 16:48:30 发布
最新推荐文章于 2022-06-19 16:48:30 发布
阅读量361 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yc520376/article/details/77417302
版权
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery表白程序-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
margin:0;
padding:0px;
background-color:#2C3437;
}
.content {
display:inline-block;
width:350px;
height:400px;
padding-top:70px;
margin-right:5px;
margin-left:5px;
}
div>div>div {
display:block;
height:20px;
}
div>div>div>div {
width:16px;
height:16px;
background-color:#ff00d8;
display:inline-block;
float:left;
margin:2px;
}
div>div.content1>div>div.fl {
background-color:#ff0033;
}
div>div.content2>div>div.fl {
background-color:#006699;
}
div>div.content3>div>div.fl {
background-color:#ffff33;
}
</style>
</head>
<body>
<div style="width: 1100px; margin: auto;">
    <p style="font-size: 40px; color: #f75fe0;text-align: center;">
        <span>老</span><span>婆</span>
    </p>
    <p style="font-size: 22px; color: #f75fe0;text-align: center;">
        <span>如</span>
        <span>果</span>
        <span>每</span>
        <span>个</span>
        <span>人</span>
        <span>一</span>
        <span>生</span>
        <span>只</span>
        <span>会</span>
        <span>遇</span>
        <span>到</span>
        <span>一</span>
        <span>颗</span>
        <span>流</span>
        <span>星</span>
        <span>，</span>
        <span>那</span>
        <span>么</span>
        <span>和</span>
        <span>你</span>
        <span>在</span>
        <span>一</span>
        <span>起</span>
        <span>就</span>
        <span>是</span>
        <span>我</span>
        <span>惟</span>
        <span>一</span>
        <span>的</span>
        <span>愿</span>
        <span>望</span>
        <span>！</span>
    </p>
    <div class="content content1">
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
    </div>


    <div class="content content2">
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
    </div>






    <div class="content content3">
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>


        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
    </div>


    <a id="bofang" style="background: #f75fe0; color:#fff; border-radius:5px;width:140px;height:40px;text-align: center;display:inline-block;margin-left:400px; line-height: 40px; cursor: pointer;opacity: 0;">
点击再看一次
</a>


    <a id="audio_btn" style="background: #f75fe0; color:#fff; border-radius:5px;width:140px;height:40px;text-align: center;display:inline-block;line-height: 40px; cursor: pointer;opacity: 0;">
点击关闭背景音乐
</a>


</div>
<audio id="music" autoplay="autoplay" loop="loop" preload="auto" src="http://www.xyptz.cn/aini.mp3">
</audio><script>
$(document).ready(function() {
    animate();
});


function animate() {
    $('div>div>div>div').each(function() {
        $(this).css({
            position: 'relative',
            top: '-400px',
            opacity: 0
        });
        var wait = Math.floor((Math.random() * 3000) + 1);
        $(this).delay(wait).animate({
            top: '0px',
            opacity: 1
        }, 2000, function() {
            $(this).delay(wait).animate({
                top: '50px',
                opacity: 0
            }, 1000, function() {
                $(this).delay(wait).animate({
                    top: '0px',
                    opacity: 1
                }, 500);




            });
        });
    });
    $('span').each(function() {
        $(this).css({
            position: 'relative',
            top: '-200px',
            opacity: 0
        });
        var wait = Math.floor((Math.random() * 3000) + 1);
        $(this).delay(wait).animate({
            top: '0px',
            opacity: 1
        }, 2000, function() {
            $(this).delay(wait).animate({
                top: '50px',
                opacity: 0
            }, 1000, function() {
                $(this).delay(wait).animate({
                    top: '0px',
                    opacity: 1
                }, 500);
            });
        });
    });
}


setTimeout(function() {
    $("a").css({
        position: 'relative',
        left: '-400px',
        opacity: 0
    });
    $("a").animate({
        left: '0px',
        opacity: 1
    }, 2000);
}, 5000)
$("#bofang").click(function() {
    animate();
});






$("#audio_btn").click(function() {
    var music = document.getElementById("music");
    if (music.paused) {
        music.play();
        $("#audio_btn").html("点击关闭背景音乐");
    } else {
        music.pause();
        $("#audio_btn").html("点击播放背景音乐");
    }
});</script>
</body>
</html>
yc520376
关注
jQuery动画
m0_57774967的博客
07-17 598
参数1speed是动画执行时间，毫秒值（比如1000），指动画在1000毫秒执行完成，也可以设置这些值“slow”，“fast”，“normal”参数1speed是动画执行时间，毫秒值（比如1000），指动画在1000毫秒执行完成，也可以设置这些值“slow”，“fast”，“normal”参数1speed是动画执行时间，毫秒值（比如1000），指动画在1000毫秒执行完成，也可以设置这些值“slow”，“fast”，“normal”它定义了产生动画的CSS属性，可以同时设置多个此类属性。...
jquery表白程序
05-23
纯 jquery+html+css的表白小程序！简单实用！
HTMLjquer特效 表白
06-24
HTMLjquer特效 表白
jQuery烂漫表白
08-17
采用js，css，jQuery做的一个表白网页。
jquery温馨浪漫表白
04-16
用jquery技术实现的一点小玩意，程序员也有浪漫的时刻
jQuery爱心表白打字动画效果
ICode联盟
09-12 286
下载地址jQuery实现的温馨浪漫爱心表白动画特效，打字效果。 dd:
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
热门推荐
JavaPub
06-19 1万+
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】我的网站已经上线了 http://javapub.net.cn/适合人群：初级学习者和爱好者，下面有展示图。计算机毕业设计🚀获取源码，文末公众号回复【制作温馨浪漫爱心表白动画特效】，即可。 ⭐欢迎点赞留言1MB GIF可以欣赏： https://tvax1.sinaimg.cn/large/007F3CC8ly1h3dn7ib17ig30ug0lxe5x.gif 获取源码，公众号回复【制作温馨浪漫爱心表白动画特效】，即可。更多最新Java面试题.
html5+jquery女神表白动画树特效
最新发布
06-28
这个夏天，除了像猪八戒啃西瓜，跟你的女神来一场别开生面的告白吧，让她对你刮目相看，让她明白，技术宅也是懂得浪漫的，html5+jquery女神表白动画树特效，你值得拥有，让你女神心动一夏！让你抱的美人归！ 技术...
jquery+html5烂漫爱心表白动画代码分享
10-23
【jQuery + HTML5浪漫爱心表白动画】是一种利用JavaScript库jQuery和HTML5的Canvas元素创建的互动动画效果，常用于制作富有创意的表白场景。在HTML5的Canvas上，可以通过JavaScript绘制图形并添加动画效果，使得爱心...
for-you-love:一个jQuery + Html5实现的表白
03-23
for-you-love:一个jQuery + Html5实现的表白源码
HTML5+jQuery制作温馨浪漫爱心表白动画特效(程序员也有浪漫的时候)
06-13
HTML5+jQuery制作温馨浪漫爱心表白动画特效(程序员也有浪漫的时候)
jQuery创意爱心表白动画效果.zip
07-04
jQuery创意爱心表白动画效果是一款基于jQuery HTML5实现的爱心表白动画特效。
jQuery结合HTML5制作的爱心树表白动画
10-24
主要给大家分享的是一则jQuery结合HTML5制作的爱心树表白动画的特效代码，各位宅在家里的程序猿们，再辛苦的工作，也不要忘记你们的女朋友哦。
HTML5+jQuery实现爱心表白动态效果
08-22
一款使用HTML5和css3制作的精美表白动画,适合前端开发人员学习--我们程序员在追求爱情方面也是非常浪漫的,
HTML5+jQuery制作温馨浪漫爱心表白动画特效
06-13
在这个表白动画中，jQuery的动画功能可能被大量运用，比如通过`.animate()`方法来控制爱心的移动轨迹、大小变化、旋转效果等，以实现浪漫的动画效果。同时，jQuery还可能用于响应用户的交互，如点击按钮后触发爱心的...
唯美表白动画代码jQuery跟Html5实现
01-09
此外，jQuery还简化了事件绑定，如点击事件(`click()`)，使得用户可以通过简单的交互触发表白动画。 其次，HTML5是现代网页的标准，它引入了许多新元素和API，极大地增强了网页的互动性和表现力。在本项目中，HTML5...
html jqeury表白,jquery表白程序
weixin_42388680的博客
06-18 164
$(document).ready(function() {animate();});function animate() {$('div>div>div>div').each(function() {$(this).css({position: 'relative',top: '-400px',opacity: 0});var wait = Math.floor((Math.r...
jquery基本动画
jmy_superb的博客
03-27 2616
jquery的基本动画 1.show()显示 2.hide()隐藏 3.toggle()切换 以上三个函数，有共同的参数 第一个表示运动时间 第二个表示运动曲线 第三个表达运动结束的回调函数 折叠动画 1.slideDown()显示 2.slideUp()隐藏 3.slideToggle()切换 以上三个函数，有共同的参数 第一个表示运动时间 第二个表示运动曲线 第三个表达运动结束的回调函数 渐隐渐显动画 1.fadeIn()显示 2.fadeOut()隐藏 3.fadeToggle()切换 以上三个函数，
HTML5+jQuery实现浪漫爱心表白动画
"使用HTML5和jQuery创建了一个温馨浪漫的爱心表白动画特效的文档。这个文档包含了一个HTML页面的结构，引入了CSS样式表和JavaScript脚本，用于实现动画效果。" 在HTML5和jQuery的结合下，我们可以创建出富有交互性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值