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文件中，即可實現一個簡單而浪漫的愛情樹頁面。你也可以根據自己的喜好對代碼進行修改，制作出更加個性化的愛情樹頁面。
下一篇html愛心相冊代碼