HTML爱情树源代码
<!DOCTYPE html>
<html>
<head>
<title>爱情树</title>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
background: #c2e59c;
background: -webkit-linear-gradient(to right, #64b3f4, #c2e59c);
background: linear-gradient(to right, #64b3f4, #c2e59c);
overflow: hidden;
}
.tree {
overflow: hidden;
margin-top: 10%;
}
.tree h1 {
font-size: 4em;
color: #1c1c1c;
text-align: center;
margin-top: 0;
}
.tree svg {
display: block;
width: 100%;
margin: 0 -5%;
}
.tree p {
font-size: 1.5em;
color: #1c1c1c;
text-align: center;
margin-top: 3em;
}
</style>
</head>
<body>
<div class="container">
<div class="tree">
<h1>我的爱情树</h1>
<svg viewBox="0 0 350 450">
<path d="M175 50 L75 150 L275 150 Z" fill="#64b3f4" />
<path d="M175 75 L125 125 L225 125 Z" fill="#1c1c1c" />
<path d="M175 100 L175 200" stroke="#1c1c1c" stroke-width="3px" />
<path d="M125 250 L175 200 L225 250 Z" fill="#1c1c1c" />
<path d="M125 225 L175 225 L225 225" stroke="#1c1c1c" stroke-width="3px" />
<path d="M100 300 L175 225 L250 300 Z" fill="#1c1c1c" />
<path d="M100 275 L175 275 L250 275" stroke="#1c1c1c" stroke-width="3px" />
</svg>
<p>我和你，就像这棵爱情树
上述代码实现了一个简单的HTML爱情树效果，使用了SVG图形标签和线条路径。通过渐变色背景和居中排版，使页面整体更加美观。将代码添加到HTML文件中，即可实现一个简单而浪漫的爱情树页面。你也可以根据自己的喜好对代码进行修改，制作出更加个性化的爱情树页面。