爱心树告白网页效果制作教程

爱心树告白网页效果制作教程

想关注爱心树网页制作的小伙伴

赶紧Mark一下叭~

说明


源码非本人所写,来自网上的资源,有小伙伴留言说对它感兴趣,故此免费分享该源代码以及修改教程,亦作为学习探讨、提高个人技术之用,谢谢!

修改 1


修改点击进入的内容
在love.js里面修改

在love.js里面修改:

ctx.font = “12px 微软雅黑,Verdana”;
ctx.fillText(“点击一下~”, 23, 10);


修改 2

修改要表白的文字内容

在index.html里面修改要表白的文字内容:

<div id="main">
  <div id="wrap">
<div id="text">
  <div id="code"> <font color="#FF0000"> <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 class="space"></span>--你要告白的话---^-^--</span></font><br>
    <a href="http://loveqiao.top/"><span class="say">morly_blog</span><br></a>
    </p>
  </div>
</div>
<div id="clock-box"> <span class="STYLE1"></span><font color="#33CC00">亲爱的:</font> <span class="STYLE1">I will always love you^-^</span>
  <div id="clock"></div>
</div>
<canvas id="canvas" width="1100" height="680"></canvas>


修改 3

修改时间

在index.html里面修改时间:

var textAnimate = eval(Jscex.compile("async", function () {
var together = new Date();
together.setFullYear(2010,9 , 1);             //时间年月日
together.setHours(16);                        //小时    
together.setMinutes(53);                    //分钟
together.setSeconds(0);                    //秒前一位
together.setMilliseconds(2);                //秒第二位

$("#code").show().typewriter();
$("#clock-box").fadeIn(500);
while (true) {
    timeElapse(together);
    $await(Jscex.Async.sleep(1000));
}
}));

修改 4

修改网页的背景音乐:

<audio autoplay="autopaly">
  <source src="renxi.mp3" type="audio/mp3" />
</audio>

网页源码地址:https://www.lanzous.com/b0bw1t22d

在线制作



可以去表白驿站在线制作,永久保存~
里面还有很多其他好看的告白网页的模板,需要的小伙伴们可自行制作喔~

网站地址:https://www.bbai520.com/love

今天的可爱已打烊

各位晚安~

道智乐生活: 可以每天为大家提供最实用桌面软件、手机APP以及工作学习最佳工具分享;影视、书籍、学习资源共享;希望可以和大家共同进步的微信公众号。

欢迎各位大佬来访喔~

文章目录
  1. 1. 想关注爱心树网页制作的小伙伴
  2. 2. 赶紧Mark一下叭~
    1. 2.1. 说明
    2. 2.2. 修改 1
    3. 2.3. 修改 2
    4. 2.4. 修改 3
    5. 2.5. 修改 4
      1. 2.5.1. 网页源码地址:https://www.lanzous.com/b0bw1t22d
    6. 2.6. 在线制作
  3. 3. 今天的可爱已打烊
  4. 4. 各位晚安~
    1. 4.0.0.1. 道智乐生活: 可以每天为大家提供最实用桌面软件、手机APP以及工作学习最佳工具分享;影视、书籍、学习资源共享;希望可以和大家共同进步的微信公众号。
  • 5. 欢迎各位大佬来访喔~
  • |