html网页制作——【制作浪漫气球520告白相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
warning:
这篇文章距离上次修改已过442天，其中的内容可能已经有所变动。
以下是一个简单的HTML5页面示例，用于创建浪漫气球的告白相册：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浪漫气球告白相册</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #000;
color: #fff;
font-family: Arial, sans-serif;
}
.balloon {
width: 500px;
height: 500px;
background: url('balloon.png') no-repeat center center;
background-size: cover;
position: relative;
animation: float 5s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(20px, -10px);
}
100% {
transform: translate(0, 0);
}
}
h1 {
text-align: center;
font-size: 3em;
margin-bottom: 20px;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="balloon">
<h1>告白相册</h1>
<img src="love.jpg" alt="爱的定义">
<img src="forever.jpg" alt="永恒的承诺">
<img src="butterfly.jpg" alt="浪漫的梦想">
<!-- 更多图片可以根据需要添加 -->
</div>
</body>
</html>在这个示例中，我们使用了CSS3的@keyframes规则来创建气球的浮动动画，并使用了flex布局来使得背景居中并填满整个屏幕。气球背景图片通过CSS背景属性引入，告白相册的图片则通过HTML的<img>标签插入。这个页面简洁而优雅，适合作为浪漫情人节的表白页面。
评论已关闭