HTML5七夕情人节表白网页制作【css3爱心表白背景特效】HTML+CSS+JavaScript 520情人节代码制作
warning:
这篇文章距离上次修改已过205天，其中的内容可能已经有所变动。
以下是一个使用HTML和CSS制作的简单的520情人节表白网页示例，包含一个CSS3动画的爱心背景：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>520表白网页</title>
<style>
@keyframes heart-burst {
0% {
transform: scale(0.8);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
body, html {
height: 100%;
margin: 0;
background: #f9f9f9;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.heart {
width: 100px;
height: 100px;
background: #ff0000;
position: relative;
animation: heart-burst 5s infinite;
}
.heart::before,
.heart::after {
content: '';
position: absolute;
width: 100px;
height: 100px;
background: #ff0000;
border-radius: 50%;
box-shadow: 0 0 20px #ff0000;
}
.heart::before {
left: -50px;
top: 0;
border-radius: 50% 0 0 0;
}
.heart::after {
left: 0;
top: -50px;
border-radius: 0 0 0 50%;
}
</style>
</head>
<body>
<div class="heart"></div>
<h1>我爱你！</h1>
</body>
</html>这段代码创建了一个心形的背景，利用CSS3动画在屏幕中心弹力形成。同时，在心形的上方加上了“我爱你！”的表白话语。这个示例简单易懂，适合新手学习HTML和CSS的基础。
评论已关闭