console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线渐变色背景生成器</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #333;
}
.preview {
width: 100%;
height: 200px;
margin: 20px 0;
border-radius: 8px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}
.controls {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.control-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="color"] {
width: 100%;
height: 40px;
cursor: pointer;
}
select, button {
width: 100%;
padding: 10px;
border-radius: 4px;
border: 1px solid #ddd;
}
button {
background: #4CAF50;
color: white;
border: none;
cursor: pointer;
font-weight: bold;
transition: background 0.3s;
}
button:hover {
background: #45a049;
}
.code {
margin-top: 20px;
padding: 15px;
background: #f8f8f8;
border-radius: 4px;
font-family: monospace;
white-space: pre-wrap;
position: relative;
}
.copy-btn {
position: absolute;
right: 10px;
top: 10px;
padding: 5px 10px;
background: #2196F3;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
.copy-btn:hover {
background: #0b7dda;
}
</style>
</head>
<body>
<div class="container">
<h1>渐变色背景生成器</h1>
<div class="preview" id="gradientPreview"></div>
<div class="controls">
<div class="control-group">
<label for="color1">颜色 1</label>
<input type="color" id="color1" value="#ff0000">
</div>
<div class="control-group">
<label for="color2">颜色 2</label>
<input type="color" id="color2" value="#0000ff">
</div>
<div class="control-group">
<label for="direction">渐变方向</label>
<select id="direction">
<option value="to right">水平 (从左到右)</option>
<option value="to left">水平 (从右到左)</option>
<option value="to bottom">垂直 (从上到下)</option>
<option value="to top">垂直 (从下到上)</option>
<option value="to bottom right">对角线 (左上到右下)</option>
<option value="to top right">对角线 (左下到右上)</option>
<option value="angle">自定义角度</option>
</select>
</div>
<div class="control-group" id="angleControl" style="display:none;">
<label for="angle">角度 (0-360deg)</label>
<input type="range" id="angle" min="0" max="360" value="90">
<span id="angleValue">90°</span>
</div>
</div>
<button id="generateBtn">生成渐变</button>
<div class="code" id="cssCode">
background: linear-gradient(to right, #ff0000, #0000ff);
<button class="copy-btn" id="copyBtn">复制</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const color1 = document.getElementById('color1');
const color2 = document.getElementById('color2');
const direction = document.getElementById('direction');
const angleControl = document.getElementById('angleControl');
const angle = document.getElementById('angle');
const angleValue = document.getElementById('angleValue');
const preview = document.getElementById('gradientPreview');
const cssCode = document.getElementById('cssCode');
const generateBtn = document.getElementById('generateBtn');
const copyBtn = document.getElementById('copyBtn');
direction.addEventListener('change', function() {
if (this.value === 'angle') {
angleControl.style.display = 'block';
} else {
angleControl.style.display = 'none';
}
updateGradient();
});
angle.addEventListener('input', function() {
angleValue.textContent = this.value + '°';
updateGradient();
});
color1.addEventListener('input', updateGradient);
color2.addEventListener('input', updateGradient);
generateBtn.addEventListener('click', updateGradient);
copyBtn.addEventListener('click', function() {
const range = document.createRange();
range.selectNode(cssCode);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
const originalText = copyBtn.textContent;
copyBtn.textContent = '已复制!';
setTimeout(() => {
copyBtn.textContent = originalText;
}, 2000);
});
function updateGradient() {
let gradientDirection;
if (direction.value === 'angle') {
gradientDirection = angle.value + 'deg';
} else {
gradientDirection = direction.value;
}
const gradient = `linear-gradient(${gradientDirection}, ${color1.value}, ${color2.value})`;
preview.style.background = gradient;
cssCode.innerHTML = `background: ${gradient}; <button class="copy-btn" id="copyBtn">复制</button>`;
document.getElementById('copyBtn').addEventListener('click', function() {
const range = document.createRange();
range.selectNode(cssCode);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
const originalText = this.textContent;
this.textContent = '已复制!';
setTimeout(() => {
this.textContent = originalText;
}, 2000);
});
}
updateGradient();
});
</script>
</body>
</html>