零基础都能拿捏的七夕浪漫代码，快去表白或去制造惊喜吧

✅作者简介：C/C++领域新星创作者，为C++和java奋斗中 ✨个人社区：微凉秋意社区

🔥前言

本篇博客分享的源码效果包括：梦幻心、biu biu 的发射爱心用来跳转的自己布局的网页。操作非常简单，不需要下载任何工具(最好有一个visual stduio code)，快来手动为ta制作惊喜吧！

一、最终效果预览

这里注意：第一个网页是自动播放音乐的喔，第二张和第三张都是渐变的，展示的只是最终效果。

二、文件方面的准备工作 1、创建各种文件夹以及文件

1. 在桌面创建一个文件夹，任意起名，我这里是qilw，文件夹内部包含 css 和 image 两个文件夹以及三个 .html 文件和下载的一个音乐(自动播放需要使用)
2. css文件夹创建文件 tx.css 备用，image文件夹选三张图片放进去(图片名字尽可能简洁)

2、全部源码(对应文件复制粘贴即可)

1. login.html

DOCTYPE html>


    
    
    
    公主殿下
    
    


                 希望十年后的每天清晨醒来都有你的可爱脸庞
    
           下面是你的七夕专属礼物喔~
    
                    1.满屏比心biubiubiu~
                    2.动态梦幻心
                    3.七夕冲鸭~
        
    

更改文字直接在源码里的对应位置修改即可

2. index.html

DOCTYPE html>


    
    
    
    祝福语
    


                    纸短情长，诉不尽当时年少
    
                              我家最仙的存在
    
    
                  
    
    
    
    
    
    
                  
        这里是你要说的话
                  
        同上
                  
        同上
                  
        同上
                  
        同上
      
        
    

需要改动的部分：17、18、19行src=" "里面的内容改为自己image文件夹下传入的图片名。

3. ax.html

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

 
  真挚爱心
  
  
  
  
  
  html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: #000;
}
canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}
  
 

 
  
  
 
var settings = {
  particles: {
    length:   500, // maximum amount of particles
    duration:   2, // particle duration in sec
    velocity: 100, // particle velocity in pixels/sec
    effect: -0.75, // play with this for a nice effect
    size:      30, // particle size in pixels
  },
};


(function(){var b=0;var c=["ms","moz","webkit","o"];for(var a=0;a