<!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;
	}
&lt;/style&gt;
&lt;script&gt;
	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;
	}
&lt;/script&gt;
</code></pre>
</head>
<body>
	<h1>点击按钮随机霓虹渐变</h1>
	<button id='button' onclick='changeBackground()'>点击这里</button>
</body>
</html>
点击随机霓虹渐变网页 - 在线生成炫彩背景

原文地址: https://www.cveoy.top/t/topic/m0oP 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录