点击随机霓虹渐变网页 - 在线生成炫彩背景
<!DOCTYPE html>
<html>
<head>
<title>点击随机霓虹渐变</title>
<style>
body {
background-color: #000;
color: #fff;
font-size: 2em;
text-align: center;
padding-top: 100px;
}
<pre><code> #button {
background-color: #ff00ff;
color: #fff;
border: 2px solid #fff;
padding: 10px 20px;
cursor: pointer;
font-size: 1em;
font-weight: bold;
border-radius: 5px;
margin-top: 50px;
}
</style>
<script>
function changeBackground() {
var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
var randomColor1 = colors[Math.floor(Math.random() * colors.length)];
var randomColor2 = colors[Math.floor(Math.random() * colors.length)];
var gradient = 'linear-gradient(to right, ' + randomColor1 + ', ' + randomColor2 + ')';
document.body.style.background = gradient;
}
</script>
</code></pre>
</head>
<body>
<h1>点击按钮随机霓虹渐变</h1>
<button id='button' onclick='changeBackground()'>点击这里</button>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/m0oP 著作权归作者所有。请勿转载和采集!