✨简介：
在这个数字时代，爱情表白方式也随之改变。在过去，我们可能会写情书或亲自表达情感，但现在，我们可以利用互联网和编程技术来创造独特而有趣的方式来表达爱意。本篇博客将介绍如何使用HTML、CSS和JavaScript创建一个令人惊喜的爱心表白网页。
✨前言：
最近天气一直在下雨，本来是像写一个有着下雨效果的网页的，我也不知道怎么写着写着就开始表白了(●'◡'●)废话不多说我们直接看网页的效果展示好了，有下雨效果的网页我也写了都在专栏里有兴趣的小伙伴可以去看看。
🍓🍓图片看不清的我们下面有视频展示（图片这块大小超过5M所以传输的时候就会有点问题）
✨视频展示
爱心——命运之光（表白）
✨源代码
🍓这里先直接放上源代码需要的直接复制粘贴即可🍓这里我们先放源代码为的就是让即便没有学过代码的小伙伴们，也可以直接拿上代码用，不用看太多大道理(●'◡'●)🍓注意：源代码后面有使用的方法记得看哈🤭
| <html> | |
| <head> | |
| <title>下雪背景效果和爱心</title> | |
| <style type="text/css"> | |
| body { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| margin: 0; | |
| overflow: hidden; | |
| background-color: #FCE8F8; | |
| } | |
| #snow-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| .snowflake { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background-color: #fff; | |
| border-radius: 50%; | |
| opacity: 0.8; | |
| pointer-events: none; | |
| animation: snowfall linear infinite; | |
| } | |
| @keyframes snowfall { | |
| 0% { | |
| transform: translateY(-100%); | |
| } | |
| 100% { | |
| transform: translateY(100vh); | |
| } | |
| } | |
| .heart { | |
| width: 200px; | |
| height: 200px; | |
| position: relative; | |
| animation: heartbeat 1s infinite; | |
| transform-origin: center center; | |
| } | |
| .heart:before, | |
| .heart:after { | |
| content: ""; | |
| background-color: red; | |
| border-radius: 50px 50px 0 0; | |
| position: absolute; | |
| top: 0; | |
| } | |
| .heart:before { | |
| left: 100px; | |
| width: 100px; | |
| height: 160px; | |
| transform: rotate(-45deg); | |
| transform-origin: 0 100%; | |
| } | |
| .heart:after { | |
| left: 0; | |
| width: 100px; | |
| height: 160px; | |
| transform: rotate(45deg); | |
| transform-origin: 100% 100%; | |
| } | |
| #timeElapsed { | |
| text-align: center; | |
| font-size: 24px; | |
| margin-top: 20px; | |
| } | |
| @keyframes heartbeat { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.2); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes falling { | |
| 0% { | |
| transform: translateY(-100vh); | |
| } | |
| 100% { | |
| transform: translateY(100vh); | |
| } | |
| } | |
| .sakura { | |
| position: absolute; | |
| top: -20px; | |
| left: -20px; | |
| width: 40px; | |
| height: 40px; | |
| background-image: url('https://www.unicode.org/emoji/charts/full-emoji-list.html#1f338'); /* 🌸的Unicode转义序列 */ | |
| background-size: cover; | |
| animation: falling linear infinite; | |
| animation-duration: 10s; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="snow-container"></div> | |
| <div class="heart"></div> | |
| <div id="timeElapsed"></div> | |
| <script> | |
| function getTimeElapsed() { | |
| var startDate = new Date("2022-01-01"); // 设置开始日期，替换为实际的起始日期 | |
| var currentDate = new Date(); | |
| var timeDiff = currentDate - startDate; | |
| var milliseconds = timeDiff % 1000; | |
| timeDiff = Math.floor(timeDiff / 1000); | |
| var seconds = timeDiff % 60; | |
| timeDiff = Math.floor(timeDiff / 60); | |
| var minutes = timeDiff % 60; | |
| timeDiff = Math.floor(timeDiff / 60); | |
| var hours = timeDiff % 24; | |
| timeDiff = Math.floor(timeDiff / 24); | |
| var days = timeDiff; | |
| var timeString = "宝贝我们已经在一起 " + days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒了"; | |
| document.getElementById("timeElapsed").textContent = timeString; | |
| } | |
| setInterval(getTimeElapsed, 1000); | |
| </script> | |
| <script> | |
| function createSnowflake() { | |
| const snowflake = document.createElement('div'); | |
| snowflake.classList.add('snowflake'); | |
| snowflake.style.left = Math.random() * window.innerWidth + 'px'; | |
| snowflake.style.animationDuration = Math.random() * 3 + 2 + 's'; | |
| snowflake.style.opacity = Math.random(); | |
| snowflake.style.fontSize = Math.random() * 10 + 10 + 'px'; | |
| const randomColor = getRandomColor(); | |
| snowflake.style.backgroundColor = randomColor; | |
| snowflake.innerHTML = '命运之光'; // You can customize the snowflake symbol here | |
| return snowflake; | |
| } | |
| function getRandomColor() { | |
| const letters = '0123456789ABCDEF'; | |
| let color = '#'; | |
| for (let i = 0; i < 6; i++) { | |
| color += letters[Math.floor(Math.random() * 16)]; | |
| } | |
| return color; | |
| } | |
| function snowfall() { | |
| const snowContainer = document.getElementById('snow-container'); | |
| const numSnowflakes = 50; // Adjust the number of snowflakes here | |
| for (let i = 0; i < numSnowflakes; i++) { | |
| const snowflake = createSnowflake(); | |
| snowContainer.appendChild(snowflake); | |
| } | |
| } | |
| snowfall(); | |
| </script> | |
| <script> | |
| function createSakura() { | |
| var sakura = document.createElement("div"); | |
| sakura.className = "sakura"; | |
| sakura.style.left = Math.random() * 100 + "vw"; | |
| sakura.style.animationDelay = Math.random() * 5 + "s"; | |
| document.body.appendChild(sakura); | |
| setTimeout(function () { | |
| sakura.remove(); | |
| }, 10000); | |
| } | |
| setInterval(createSakura, 200); | |
| </script> | |
| </body> | |
| </html> |
✨代码的使用方法（超简单什么都不用下载）
🍓1.打开记事本
🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可
🍓3.打开html文件（大功告成(●'◡'●)）
✨代码讲解（选看，小白看到这里就可以结束了哈，不用再往下看了哈）
🍓这里必须说一下，代码不难，会使用HTML,CSS,JS就行，小白看也看不明白，所以以下内容选看哈，写在最后就是为了不影响小白们的观看体验哈(●'◡'●)，祝大家开心快乐🎉🎉
🍓下面逐行解释代码的功能和作用：
1. `<!DOCTYPE html>`：声明文档类型为HTML，这里使用HTML5的文档类型声明。
2. `<html>`：表示整个HTML文档的根元素。
3. `<head>`：包含了文档的元数据信息和样式表。
4. `<title>`：设置网页的标题。
5. `<style>`：定义内部样式表，用于设置网页的样式。
6. `body`：定义页面的内容。
- `display: flex;`：设置页面的布局为弹性布局，使其内容在垂直和水平方向上居中显示。
- `align-items: center;`：使页面内容在垂直方向上居中对齐。
- `justify-content: center;`：使页面内容在水平方向上居中对齐。
- `height: 100vh;`：设置页面高度为视窗的高度，使其充满整个屏幕。
- `margin: 0;`：移除页面的默认边距。
- `overflow: hidden;`：隐藏页面内容溢出部分。
- `background-color: #FCE8F8;`：设置页面背景颜色为粉色。
7. `#snow-container`：一个用于容纳下雪效果的元素。
- `position: fixed;`：将元素的定位方式设置为固定定位，相对于浏览器窗口固定位置。
- `top: 0; left: 0;`：将元素定位到页面的左上角。
- `width: 100%; height: 100%;`：将元素的宽度和高度设置为100%，使其充满整个屏幕。
- `pointer-events: none;`：禁用元素的鼠标事件，使其不接收用户的交互操作。
- `z-index: -1;`：将元素的堆叠顺序设置为-1，使其在其他内容的下方。
8. `.snowflake`：定义雪花元素的样式。
- `position: absolute;`：将元素的定位方式设置为绝对定位。
- `width: 10px; height: 10px;`：设置元素的宽度和高度为10像素。
- `background-color: #fff;`：设置元素的背景颜色为白色。
- `border-radius: 50%;`：将元素的边框半径设置为50%，使其呈现圆形。
- `opacity: 0.8;`：设置元素的透明度为0.8。
- `pointer-events: none;`：禁用元素的鼠标事件。
- `animation: snowfall linear infinite;`：应用名为`snowfall`的动画效果，设置为线性运动
- ，并无限循环播放。
9. `@keyframes snowfall`：定义名为`snowfall`的关键帧动画。
- `0%`：动画的起始状态，将元素向上移动到-100%的位置。
- `100%`：动画的结束状态，将元素向下移动到视窗高度（100vh）的位置。
10. `.heart`：定义爱心元素的样式。
- `width: 200px; height: 200px;`：设置元素的宽度和高度为200像素。
- `position: relative;`：将元素的定位方式设置为相对定位。
- `animation: heartbeat 1s infinite;`：应用名为`heartbeat`的动画效果，设置为1秒的循环播放。
- `transform-origin: center center;`：设置元素的变换原点为中心点。
11. `.heart:before` 和 `.heart:after`：定义爱心元素的伪元素样式，用于绘制爱心的两个半边。
- `content: "";`：设置伪元素的内容为空。
- `background-color: red;`：设置伪元素的背景颜色为红色。
- `border-radius: 50px 50px 0 0;`：设置伪元素的边框半径，实现爱心形状。
- `position: absolute;`：将伪元素的定位方式设置为绝对定位。
- `top: 0;`：将伪元素定位到顶部位置。
12. `#timeElapsed`：显示时间流逝的元素。
- `text-align: center;`：设置文本内容在水平方向上居中对齐。
- `font-size: 24px;`：设置文本的字体大小为24像素。
- `margin-top: 20px;`：设置文本距离顶部的边距为20像素。
13. `<script>`：嵌入JavaScript代码，用于实现网页的交互和动态效果。
14. `function getTimeElapsed()`：定义一个获取时间流逝的函数。
- `var startDate = new Date("2022-01-01");`：设置开始日期，可以替换为实际的起始日期。
- `var currentDate = new Date();`：获取当前日期和时间。
- `var timeDiff = currentDate - startDate;`：计算当前日期与开始日期之间的时间差。
- 然后，通过一系列的计算，将时间差转换为天、小时、分钟和秒，并拼接成一个时间字符串。
- 最后，将时间字符串设置为`timeElapsed`元素的文本内容。
15. `setInterval(getTimeElapsed, 1000);`：每隔一秒调用一次`getTimeElapsed`函数，更新时间流逝的显示。
16. `function createSnowflake()`：定义创建雪花的函数。
- 创建一个`<div>`元素作为雪花。
- 设置
雪花的样式，包括位置、动画持续时间、透明度、字体大小和背景颜色。
- 随机生成雪花的背景颜色。
- 设置雪花的内容为"命运之光"（可自定义）。
- 返回创建的雪花元素。
17. `function getRandomColor()`：定义获取随机颜色的函数。
- 生成一个随机的十六进制颜色。
- 返回随机颜色。
18. `function snowfall()`：定义雪花下落效果的函数。
- 获取雪花容器元素。
- 设置生成的雪花数量。
- 循环生成雪花，并将其添加到雪花容器中。
19. `snowfall();`：调用`snowfall`函数，开始下雪效果。
20. `function createSakura()`：定义创建樱花的函数。
- 创建一个`<div>`元素作为樱花。
- 设置樱花的样式，包括位置和动画延迟时间。
- 将樱花添加到页面中。
- 设置一个定时器，在10秒后移除樱花。
21. `setInterval(createSakura, 200);`：每隔200毫秒调用一次`createSakura`函数，创建樱花效果。
🍓🍓这段代码实现了一个带有下雪背景效果和爱心的网页，同时显示了两个倒计时效果，一个是从指定日期开始计算的时间流逝，另一个是每秒钟刷新的下雪效果。通过CSS和JavaScript的配合，实现了页面的布局、样式和动态效果。
✨结语
能看到这里的就说明，你一定是一个十分有耐心且浪漫的人，最后的最后祝愿你开开心心，快快乐乐，早日脱单，就不用再为如何表白发愁啦(●'◡'●)🤭