甜甜甜！HTML5 快速实现一颗告白爱心树！| 原力计划

最新推荐文章于 2024-07-06 15:13:58 发布
最新推荐文章于 2024-07-06 15:13:58 发布
阅读量9.3k 收藏 105
点赞数 15
原文链接：https://edu.csdn.net/huiyiCourse/detail/1157
版权

作者 | Himit_ZH

责编 | 伍杏玲

出品 | CSDN博客

利用HTML5、CSS、JS实现爱心树以及纪念日期的功能，网页有播放音乐功能 以及打字倾诉感情的画面，非常适合送给女朋友。

具体的HTML代码

具体只要修改代码里面的男某某和女某某 文字段也可自行修改，还有代码下半部分的JS代码需要修改一下起始日期 注意月份为0~11月 也就是月份需要减一。

当然只有一部分HTML和JS代码不够运行的，文章最下面还附加了完整代码的下载地址

<!DOCTYPE html>

<html xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>男某某与女某某日期纪念功能</title>



        <link type="text/css" rel="stylesheet" href="./index_files/default.css">

<script type="text/javascript" src="./index_files/jquery.min.js"></script>

<script type="text/javascript" src="./index_files/jscex.min.js"></script>

<script type="text/javascript" src="./index_files/jscex-parser.js"></script>

<script type="text/javascript" src="./index_files/jscex-jit.js"></script>

<script type="text/javascript" src="./index_files/jscex-builderbase.min.js"></script>

<script type="text/javascript" src="./index_files/jscex-async.min.js"></script>

<script type="text/javascript" src="./index_files/jscex-async-powerpack.min.js"></script>

<script type="text/javascript" src="./index_files/functions.js" charset="utf-8"></script>

<script type="text/javascript" src="./index_files/love.js" charset="utf-8"></script>

    <style type="text/css">

<!--

.STYLE1 {color: #666666}

-->

        </style>

</head>

    <body>

        <div id="main">

            <div id="error">本页面采用HTML5编辑，目前您的浏览器无法显示，请换成谷歌(<a href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>)或者火狐(<a href="http://firefox.com.cn/download/">Firefox</a>)浏览器，或者其他游览器的最新版本。</div>

            <div id="wrap">

                <div id="text">

        <div id="code">

        <span class="say">* 致女某某： *</span><br>

<span class="say"> </span><br>

        <span class="say">· 女某某，情人节快乐！</span><br>

<span class="say"> </span><br>

                        <span class="say">· 不经意相识, 或许是缘分，或许是注定的。</span><br>

<span class="say"> </span><br>

        <span class="say">· 虽然......，但依......！</span><br>

<span class="say"> </span><br>

        <span class="say">· 虽然......，但......！</span><br>

<span class="say"> </span><br>

        <span class="say">· 虽然......，但......！</span><br>

<span class="say"> </span><br>

        <span class="say">· 虽然......</span><br>

<span class="say"> </span><br>

        <span class="say">· 无论如何，只要你我依旧喜欢对方，我会一直陪着你。</span><br>

                        <span class="say"> </span><br>

                        <span class="say">· You are my only girlfriend.</span><br>

<span class="say"> </span><br>

<span class="say">· I love you,×××!</span><br>

<span class="say"> </span><br>

                        <span class="say"><span class="space"></span>--@author 男某某--</span>

        </div>

                </div>

                <div id="clock-box">

                    <span class="STYLE1">现在是</span>男某某 <span class="STYLE1" style="color: red">❤</span> 女某某<span class="STYLE1" style="color: red">相恋</span>

                  <div id="clock"></div>

              </div>

                <canvas id="canvas" width="1100" height="680"></canvas>

            </div>



        </div>



    <script>

    </script>



    <script>

    (function(){

        var canvas = $('#canvas');



        if (!canvas[0].getContext) {

            $("#error").show();

            return false;

        }



        var width = canvas.width();

        var height = canvas.height();



        canvas.attr("width", width);

        canvas.attr("height", height);



        var opts = {

            seed: {

                x: width / 2 - 20,

                color: "rgb(190, 26, 37)",

                scale: 2

            },

            branch: [

                [535, 680, 570, 250, 500, 200, 30, 100, [

                    [540, 500, 455, 417, 340, 400, 13, 100, [

                        [450, 435, 434, 430, 394, 395, 2, 40]

                    ]],

                    [550, 445, 600, 356, 680, 345, 12, 100, [

                        [578, 400, 648, 409, 661, 426, 3, 80]

                    ]],

                    [539, 281, 537, 248, 534, 217, 3, 40],

                    [546, 397, 413, 247, 328, 244, 9, 80, [

                        [427, 286, 383, 253, 371, 205, 2, 40],

                        [498, 345, 435, 315, 395, 330, 4, 60]

                    ]],

                    [546, 357, 608, 252, 678, 221, 6, 100, [

                        [590, 293, 646, 277, 648, 271, 2, 80]

                    ]]

                ]] 

            ],

            bloom: {

                num: 700,

                width: 1080,

                height: 650,

            },

            footer: {

                width: 1200,

                height: 5,

                speed: 10,

            }

        }



        var tree = new Tree(canvas[0], width, height, opts);

        var seed = tree.seed;

        var foot = tree.footer;

        var hold = 1;



        canvas.click(function(e) {

            var offset = canvas.offset(), x, y;

            x = e.pageX - offset.left;

            y = e.pageY - offset.top;

            if (seed.hover(x, y)) {

                hold = 0; 

                canvas.unbind("click");

                canvas.unbind("mousemove");

                canvas.removeClass('hand');

            }

        }).mousemove(function(e){

            var offset = canvas.offset(), x, y;

            x = e.pageX - offset.left;

            y = e.pageY - offset.top;

            canvas.toggleClass('hand', seed.hover(x, y));

        });



        var seedAnimate = eval(Jscex.compile("async", function () {

            seed.draw();

            while (hold) {

                $await(Jscex.Async.sleep(10));

            }

            while (seed.canScale()) {

                seed.scale(0.95);

                $await(Jscex.Async.sleep(10));

            }

            while (seed.canMove()) {

                seed.move(0, 2);

                foot.draw();

                $await(Jscex.Async.sleep(10));

            }

        }));



        var growAnimate = eval(Jscex.compile("async", function () {

            do {

            tree.grow();

                $await(Jscex.Async.sleep(10));

            } while (tree.canGrow());

        }));



        var flowAnimate = eval(Jscex.compile("async", function () {

            do {

            tree.flower(2);

                $await(Jscex.Async.sleep(10));

            } while (tree.canFlower());

        }));



        var moveAnimate = eval(Jscex.compile("async", function () {

            tree.snapshot("p1", 240, 0, 610, 680);

            while (tree.move("p1", 500, 0)) {

                foot.draw();

                $await(Jscex.Async.sleep(10));

            }

            foot.draw();

            tree.snapshot("p2", 500, 0, 610, 680);





            canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");

            canvas.css("background", "#ffe");

            $await(Jscex.Async.sleep(300));

            canvas.css("background", "none");

        }));



        var jumpAnimate = eval(Jscex.compile("async", function () {

            var ctx = tree.ctx;

            while (true) {

                tree.ctx.clearRect(0, 0, width, height);

                tree.jump();

                foot.draw();

                $await(Jscex.Async.sleep(25));

            }

        }));

       //下面修改起始日期

        var textAnimate = eval(Jscex.compile("async", function () {

    var together = new Date();

    together.setFullYear(2020, 1, 2); //时间年月日 月份0~11

    together.setHours(22);    //小时

    together.setMinutes(22);    //分钟

    together.setSeconds(2);    //秒前一位

    together.setMilliseconds(2);    //秒第二位



    $("#code").show().typewriter();

            $("#clock-box").fadeIn(500);

            while (true) {

                timeElapse(together);

                $await(Jscex.Async.sleep(1000));

            }

        }));



        var runAsync = eval(Jscex.compile("async", function () {

            $await(seedAnimate());

            $await(growAnimate());

            $await(flowAnimate());

            $await(moveAnimate());



            textAnimate().start();



            $await(jumpAnimate());

        }));



        runAsync().start();

    })();

    </script>

    <iframe src = "./给你们.mp3" allow = "autoplay" hidden /> //自己修改音乐位置

</body>

</html>

画面演示

①点击网页中心的爱心，刚进入网页会自动播放音乐

②会慢慢生成爱心树，速度挺快的

③然后会平移爱心树到最右边，准备生成文章

④会慢慢生成所要说的话 日期设定是2020.02.02 22：22：22

⑤最后的样子

代码：

https://pan.baidu.com/s/1DE2l4fkNdnZUxxme4HS6vw，提取码: i69r

原文链接：https://blog.csdn.net/weixin_43853097/article/details/104240158

技术战“疫”，贾扬清、李飞飞要给程序员直播讲AI技术！

2月18日、2月20日，阿里云CIO学院攻“疫”技术课程正式开启。您将获得与达摩院数据库首席科学家 、阿里巴巴集团副总裁、ACM 杰出科学家李飞飞，Caffe之父、ONNX创始人、阿里巴巴集团副总裁贾扬清，阿里巴巴集团副总裁、阿里 CIO 学院院长胡臣杰等顶级技术专家直播互动的机会。

热 文 推 荐

☞“删库跑路”这件事情真的发生了 ，还是技术总监干的！

☞掌握此文，面试再也不怕红黑树！

☞10 万阿里人都爱用的网红工具，语雀如何“用保护钱包的技术在保护文档安全”？

☞大神如何一招完美解决Hadoop集群无法正常关闭的问题！| 博文精选

☞一文读懂拜占庭将军问题

☞超赞的PyTorch资源大列表，GitHub标星9k+，中文版也上线了

你点的每个“在看”，我都认真当成了喜欢

点击阅读原文，即刻报名以上直播活动！

CSDN 程序人生
关注
HTML5七夕情人节表白网页(爱情树 Html5实现唯美表白动画代码) HTML+CSS+JavaScript
B85951005的博客
08-04 5070
七夕情人节表白网页爱情树
爱情树告白网站源码
02-16
爱情树告白网站源码
jQuery结合HTML5制作的爱心树表白动画
10-24
主要给大家分享的是一则jQuery结合HTML5制作的爱心树表白动画的特效代码，各位宅在家里的程序猿们，再辛苦的工作，也不要忘记你们的女朋友哦。
爱情树的表白网页 html5+css+js
05-19
爱情树的表白网页 可自行修改和编辑
七夕必备！这些Python表白代码
最新发布
2301_78094861的博客
07-06 2627
生活需仪式感，更多需要的是在乎和关爱。程序员有独特的表白方式，分享一波，走你。
动态爱心树html的源码
09-12
动态爱心树html的源码
使用HTML完成的两个简单的表白小页面
weixin_42362271的博客
06-19 4928
1.爱情树 网址：http://47.99.123.178:8081/biaobai/index.htm 预览图：<背景音乐：独家记忆> 2.表白爱心 网址：http://47.99.123.178:8081/biaobai/index.html 效果图：<背景音乐：告白气球> ...
爱情树版-表白源代码html动态图
04-01
爱情树版-表白源代码html动态图 效果演示http://www.lmtaolu.cn/biaobai/aiqingshu/
爱心树html,爱心树
weixin_33293858的博客
06-19 776
从前有一棵树……她好爱一个男孩。每天男孩都会跑来，收集她的叶子，把叶子编成皇冠，扮起森林里的国王。男孩会爬上树干，抓着树枝荡秋千。男孩会吃吃苹果。他们还会一起玩捉迷藏。玩累了，男孩就在她的树荫下睡觉。男孩好爱这棵树......好爱喔！树好快乐。日子在一天天的过去，男孩也长大了，他很久都没来找树玩耍，树觉得很孤单。有一天，男孩终于来了。树说：“孩子，我好想你啊！来，快爬到我的树干上，抓着我的树枝荡秋...
html 爱心树,爱心树
weixin_30010987的博客
06-11 257
从前有一棵树……她好爱一个男孩。每天男孩都会跑来，收集她的叶子，把叶子编成皇冠，扮起森林里的国王。男孩会爬上树干，抓着树枝荡秋千。男孩会吃吃苹果。他们还会一起玩捉迷藏。玩累了，男孩就在她的树荫下睡觉。男孩好爱这棵树......好爱喔！树好快乐。日子在一天天的过去，男孩也长大了，他很久都没来找树玩耍，树觉得很孤单。有一天，男孩终于来了。树说：“孩子，我好想你啊！来，快爬到我的树干上，抓着我的树枝荡秋...
爱心树代码实现爱心表白树源码（免费分享）html+js+css
热门推荐
webl2580的博客
01-11 1万+
爱心代码
爱心树在线表白网站源码
08-10
爱心树表白网页源码，分为个人版和公共版。公共版支持自定义显示的内容并生成专属链接。纯 Html 实现，支持各大网站空间使用。
浪漫爱情树表白代码
05-21
本程序可修改性较强，可在代码里面进行内容修改，如有疑问，可私信
html网页表白树源码
04-15
非常绚丽的前端页面表白
爱心网页-HTML-代码
05-24
一个web网页，用HTML写的，css样式、JavaScript也在里面，会动，有特效，学习前端的朋友可以试着下载来看看，有些地方是可以借鉴的，挺不错的
给对象的爱心树(基于html, 点开即运行)
05-20
可以改的有三个地方: 网页标题(可不改, 献给一生最爱的人), 左侧要和对象说的话, 以及下方设置在一起的时间
爱心表白（html实现，附全部源代码，可以直接运行哦！）.rar
08-03
这个项目的标签包括“资源达人分享计划”、“源码类”和“爱心表白”，表明它是一个社区共享的项目，旨在帮助人们学习和交流前端技术。对于初学者来说，这是一个很好的实践机会，可以通过阅读和理解源代码来提升自己...
这是一份关于520表白html5的爱心代码
05-20
### 520表白HTML5爱心代码解析 #### 一、引言 随着HTML5的广泛应用，越来越多的创意可以通过简单的代码实现。今天我们要探讨的就是如何用HTML5制作一个简单而温馨的情人节礼物——爱心表白网页。通过分析提供的...
HTML5浪漫爱心表白动画在线演示程序
02-12
这个"HTML5浪漫爱心表白动画在线演示程序"是一个利用HTML5特性制作的创意应用，特别适合在情人节这样的特殊日子里，为你的另一半展现个性化的表白方式。 HTML5的核心特性包括更好的语义化标签、离线存储、拖放功能...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值