mirror of
https://github.com/027xiguapi/code-box.git
synced 2026-04-28 15:22:15 +00:00
100 lines
4.2 KiB
HTML
100 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<style>
|
|
.text-gradient {
|
|
font-size: 48px;
|
|
margin: auto;
|
|
text-align: center;
|
|
/* 设置字体透明 */
|
|
color: transparent;
|
|
/* 设置线性渐变，从红色渐变到蓝色 */
|
|
background-image: linear-gradient(45deg, blue, red);
|
|
/* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
|
|
-webkit-background-clip: text;
|
|
/* 非Webkit内核浏览器需要使用标准前缀 */
|
|
background-clip: text;
|
|
/* 把当前元素设置为行内块，以便能够应用背景 */
|
|
}
|
|
|
|
.text {
|
|
text-anchor: middle;
|
|
dominant-baseline: middle;
|
|
fill: url(#gradient);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- <svg>
|
|
<defs>
|
|
<linearGradient id="gradient">
|
|
<stop offset="0%" stop-color="#FFCF02" />
|
|
<stop offset="100%" stop-color="#FF7352" />
|
|
</linearGradient>
|
|
</defs>
|
|
<text class="text" x="50%" y="50%">为你定制 发现精彩</text>
|
|
</svg> -->
|
|
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-code">
|
|
<path d="M10 9.5 8 12l2 2.5" />
|
|
<path d="m14 9.5 2 2.5-2 2.5" />
|
|
<rect width="18" height="18" x="3" y="3" rx="2" />
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge">
|
|
<linearGradient id="gradient">
|
|
<stop offset="0%" stop-color="#FFCF02" />
|
|
<stop offset="100%" stop-color="#FF7352" />
|
|
</linearGradient>
|
|
<path class="text"
|
|
d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" />
|
|
<path d="M10 9.5 8 12l2 2.5" />
|
|
<path d="m14 9.5 2 2.5-2 2.5" />
|
|
</svg> -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge">
|
|
<linearGradient id="gradient">
|
|
<stop offset="0%" stop-color="#FFCF02" />
|
|
<stop offset="100%" stop-color="#FF7352" />
|
|
</linearGradient>
|
|
<path class="text"
|
|
d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" />
|
|
<path d="M10 9.5 8 12l2 2.5" />
|
|
<path d="m14 9.5 2 2.5-2 2.5" />
|
|
</svg>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 124 124" fill="none">
|
|
<rect width="124" height="124" rx="24" fill="#F97316" />
|
|
<path
|
|
d="M19.375 36.7818V100.625C19.375 102.834 21.1659 104.625 23.375 104.625H87.2181C90.7818 104.625 92.5664 100.316 90.0466 97.7966L26.2034 33.9534C23.6836 31.4336 19.375 33.2182 19.375 36.7818Z"
|
|
fill="white" />
|
|
<circle cx="63.2109" cy="37.5391" r="18.1641" fill="black" />
|
|
<rect opacity="0.4" x="81.1328" y="80.7198" width="17.5687" height="17.3876" rx="4"
|
|
transform="rotate(-45 81.1328 80.7198)" fill="#FDBA74" />
|
|
</svg>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke-width="0" fill="#F97316"
|
|
d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" />
|
|
<path d="M10 9.5 8 12l2 2.5" stroke="white"/>
|
|
<path d="m14 9.5 2 2.5-2 2.5" stroke="white"/>
|
|
</svg>
|
|
|
|
<div id="editableDiv" contenteditable="true">这是可编辑的内容。</div>
|
|
<button onclick="modifyContent()">修改内容</button>
|
|
<script>
|
|
function modifyContent() {
|
|
var editableDiv = document.getElementById('editableDiv');
|
|
editableDiv.innerHTML = '这是修改后的内容！'; // 修改为新的内容
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |