博主:命运之光 专栏:web开发(html css js)
在这个数字时代,爱情表白方式也随之改变。在过去,我们可能会写情书或亲自表达情感,但现在,我们可以利用互联网和编程技术来创造独特而有趣的方式来表达爱意。本篇博客将介绍如何使用HTML、CSS和JavaScript创建一个令人惊喜的爱心表白网页。
最近天气一直在下雨,本来是像写一个有着下雨效果的网页的,我也不知道怎么写着写着就开始表白了(●'◡'●)废话不多说我们直接看网页的效果展示好了,有下雨效果的网页我也写了都在专栏里有兴趣的小伙伴可以去看看。
🍓🍓图片看不清的我们下面有视频展示(图片这块大小超过5M所以传输的时候就会有点问题)
爱心——命运之光(表白)
🍓这里先直接放上源代码需要的直接复制粘贴即可 🍓这里我们先放源代码为的就是让即便没有学过代码的小伙伴们,也可以直接拿上代码用,不用看太多大道理(●'◡'●) 🍓注意:源代码后面有使用的方法记得看哈🤭
<!DOCTYPE html>
<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>
🍓这里必须说一下,代码不难,会使用HTML,CSS,JS就行,小白看也看不明白,所以以下内容选看哈,写在最后就是为了不影响小白们的观看体验哈(●'◡'●),祝大家开心快乐🎉🎉
🍓下面逐行解释代码的功能和作用:
1. `<!DOCTYPE html>`:声明文档类型为HTML,这里使用HTML5的文档类型声明。
2. `<html>`:表示整个HTML文档的根元素。
3. `<head>`:包含了文档的元数据信息和样式表。
4. `<title>`:设置网页的标题。
5. `<style>`:定义内部样式表,用于设置网页的样式。
6. `body`:定义页面的内容。
7. `#snow-container`:一个用于容纳下雪效果的元素。
8. `.snowflake`:定义雪花元素的样式。
9. `@keyframes snowfall`:定义名为`snowfall`的关键帧动画。
10. `.heart`:定义爱心元素的样式。
11. `.heart:before` 和 `.heart:after`:定义爱心元素的伪元素样式,用于绘制爱心的两个半边。
12. `#timeElapsed`:显示时间流逝的元素。
13. `<script>`:嵌入JavaScript代码,用于实现网页的交互和动态效果。
14. `function getTimeElapsed()`:定义一个获取时间流逝的函数。
15. `setInterval(getTimeElapsed, 1000);`:每隔一秒调用一次`getTimeElapsed`函数,更新时间流逝的显示。
16. `function createSnowflake()`:定义创建雪花的函数。
雪花的样式,包括位置、动画持续时间、透明度、字体大小和背景颜色。
17. `function getRandomColor()`:定义获取随机颜色的函数。
18. `function snowfall()`:定义雪花下落效果的函数。
19. `snowfall();`:调用`snowfall`函数,开始下雪效果。
20. `function createSakura()`:定义创建樱花的函数。
21. `setInterval(createSakura, 200);`:每隔200毫秒调用一次`createSakura`函数,创建樱花效果。
🍓🍓这段代码实现了一个带有下雪背景效果和爱心的网页,同时显示了两个倒计时效果,一个是从指定日期开始计算的时间流逝,另一个是每秒钟刷新的下雪效果。通过CSS和JavaScript的配合,实现了页面的布局、样式和动态效果。
能看到这里的就说明,你一定是一个十分有耐心且浪漫的人,最后的最后祝愿你开开心心,快快乐乐,早日脱单,就不用再为如何表白发愁啦(●'◡'●)🤭