写一个包含有烟花和大海的表白用的网页
时间: 2024-05-30 17:16:36 浏览: 91
<!DOCTYPE html>
<html>
<head>
<title>烟花与大海的表白</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: #000;
color: #fff;
font-family: Arial, sans-serif;
font-size: 20px;
line-height: 1.5;
text-align: center;
}
h1 {
font-size: 40px;
margin-top: 50px;
margin-bottom: 30px;
}
p {
margin-bottom: 50px;
}
#fireworks {
position: relative;
width: 100%;
height: 500px;
margin-bottom: 50px;
}
#sea {
position: relative;
width: 100%;
height: 500px;
background-image: url('https://cdn.pixabay.com/photo/2016/03/09/09/22/wave-1246560_960_720.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-bottom: 50px;
}
#heart {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-image: url('https://cdn.pixabay.com/photo/2016/03/31/20/51/heart-1296088_960_720.png');
background-size: contain;
background-repeat: no-repeat;
animation: heartbeat 2s linear infinite;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<h1>烟花与大海的表白</h1>
<div id="fireworks"></div>
<div id="sea">
<div id="heart"></div>
</div>
<p>亲爱的,我想对你说,我爱你。这个世界上最美的事情莫过于烟花和大海,它们都有着无尽的魅力和奇妙的力量。而我爱你,就像烟花绽放的美丽,就像大海浩瀚的深情,无尽而真实。我愿意和你一起,看烟花绽放,听大海呼吸,感受这个世界的美好,一直到永远。</p>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mattboldt/typed.js/lib/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fireworks/2.0.0/fireworks.min.js"></script>
<script>
$(document).ready(function() {
// Typed.js
var typed = new Typed('h1', {
strings: ['烟花与大海的表白'],
typeSpeed: 100,
backSpeed: 50,
loop: false
});
// Fireworks.js
$('#fireworks').fireworks({
sound: true,
opacity: 0.5,
width: '100%',
height: '100%'
});
});
</script>
</body>
</html>
阅读全文