表白墙

最新推荐文章于 2022-04-24 10:06:09 发布
原创 最新推荐文章于 2022-04-24 10:06:09 发布 · 814 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个使用HTML、CSS和JavaScript实现的表白墙动画效果。该动画通过动态调整页面元素的位置和透明度来模拟雪花飘落的效果。文章详细展示了如何通过设置不同的延迟时间和动画时长来确保每个元素运动的独特性和整体视觉效果的丰富度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表白墙</title>
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>


 <div style="width:1100px; margin:100px auto;">
     <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 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 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>
        <!-- 第二个9 -->
     <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"></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 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 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"></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>
<script>
   $(function() { 
     animate();
        function animate() {
            $('div>div>div>div').each(function() { 
                $(this).css({   
                    position: 'relative', 
                    top: '-400px',
                    opacity: 0   
                });


        var ww = Math.floor((Math.random() * 3000) + 1);     
        $(this).delay(ww).animate({
            top: '10px',
            opacity: 1
        }, 3000, function() {                           
            $(this).delay(ww).animate({
                top: '10px',
                opacity: 0
            }, 2000, function() {
                $(this).delay(ww).animate({
                    top: '0px',
                    opacity: 1
                }, 1000);
            });
        });
    });
}


});




</script>
</body>
</html>css样式:body {
    margin: 0 auto;
    padding: 0;
    background:#000;
}
.content {
    display: inline-block;
    width: 350px;
    height: 400px;
}
div>div>div {
    display:block;
    height:20px;
}
div>div>div>div {
    width:16px;
    height:16px;
    display:inline-block;
    float:left;
    margin:2px;
}
div>div.content1>div>div.fl {
    background-color:red;
}
div>div.content2>div>div.fl {
    background-color:red;
}
div>div.content3>div>div.fl {
    background-color:red;
}
suwya
关注
js前端实现的表白墙，挺有意思的
02-14
很有意思的一个js'小程序，程序也可以很浪漫，很浪漫的
表白墙（Django）
weixin_34405925的博客
11-26 395
为什么80%的码农都做不了架构师？>>> ...
微信树洞表白墙~
08-18
微信树洞表白墙源码.zip
表白墙源码
06-18
高校表白墙源码，实时显示，与人人网的模式不同。
html+js表白墙
Jak的博客
01-02 2270
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;love&lt;/title&gt; &lt;link href="favicon.ico" rel="shortcut icon" /&gt; &l
校园表白墙网站源码、表白墙网站制作、网页表白墙源码
最新发布
01-04
校园表白墙是一种专为高校学生搭建的网络交流平台，其核心功能是允许学生在网站上发表表白信息，与他人分享自己的情感状态和心声。这类网站在校园中颇受欢迎，因为它提供了一个既公开又相对保护隐私的空间，让学生们...
校园表白墙网站源码/表白网站源码/表白网页制作html【表白网站制作】
07-30
校园表白墙网站源码/表白网站源码/表白网页制作html_表白网站制作 效果演示：www.hybiaobai.cn 后台/admin 账号密码都是ygwzjs.cn 安装很简单， a、直接上传到要目录 并解压 b、绑定 解析好域名 c、安装完成！ 新年...
2024表白墙PHP网站源码
09-02
8. 扩展功能与定制：虽然基本的安装和使用提供了表白墙网站的核心功能，但根据用户需求，网站还可以进行功能扩展和定制开发，比如增加用户认证、增加交互元素、提升用户体验和界面美观等。 9. 用户群体与互动性：...
H5自适应留言表白墙php源码
08-13
它的主要功能是实现一个自适应不同设备屏幕大小的留言表白墙。这里的“自适应”意味着该源码能够自动调整布局，以在手机、平板电脑或桌面电脑等不同设备上提供良好的用户体验。 【描述详解】：“php源码 一款H5...
表白静态页_表白墙页面_表白墙_
10-02
在本案例中，我们讨论的是一个用于表达情感，尤其是浪漫情感的网页——表白墙。 表白墙页面是互联网上的一种社交形式，它允许用户匿名或公开地向他人表达爱意、赞美或者感谢。这些页面通常设计得富有创意和温馨，以...
表白墙带后台和源码
11-30
花了钱从网上下载的，保证满意，而且有小程序前端代码以及小程序后台
网页表白墙
07-23
表白墙（最新修复版） 表白墙源码。
一个表白墙项目
10-11
本人是在读研究生，最近需要找工作所以写了这个APP,虽然没什么卵用，但是觉得还是有很大收获，了解了MVP设计模式的nice以及一些第三方sdk的使用，为了以后开发打下一些基础.
好看的表白墙LoveCards v1.0.4 源码（开源）
字节网盘SEO工具
08-12 3312
简介： 1.0.0/2.10 完成原版基础全部功能 去掉部分鸡肋共功能 新增： 后台表白卡编辑功能 后台评论编辑功能 后台管理员功能 用户表白卡搜索功能 门户首页“热度排名”功能 1.0.1/2.12 修复： 搜索无法中文查询 管理员账号无法删除 新增： 登录，评论，Geetest双验证功能 1.0.1/2.13 新增安装引导程序 1.0.1/2.14 添加授权以及更新提醒 1.0.1/2.16 完善授权以及更新提醒 1.0.2/2.20 优化后台部分逻辑 1.0.2/2.21 修复后台系统设置问题 1.0
表白墙源码/可用作博客论坛都是不错的
banzhuan678的博客
04-24 516
简介： 可以做校园内的，也可以做校区间的，可以做个人博客，个人论坛，问答社区，可封装成APP。告别QQ空间的表白墙吧。 安装简单，上传程序安装，然后设置账号密码，登陆后台切换模板手机PC都要换开启插件访问前台。 安装完成后如果能正常访问就删除install安装文件夹 云盘地址： http://zijiepan3.xyz/6R0tWTVdVoj0 演示： ...
手机端表白墙浪漫源码发布
首先，文件中提到了“表白墙浪漫”，这个名字暗示了这是一个与情感表达相关的内容。表白墙作为一个网络平台，通常允许用户匿名或实名地发布信息，用以表达爱慕、祝福等情感。在IT行业中，表白墙可以被看作是一种社交...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值