手把手实现一个Linear Gradient Generator实现一个linear gradient generato

和上面文章实现 box shadow generator类似，这篇文章实现linear gradient generator

线上地址 wfqvqw.csb.app/

linear gradient语法非常灵活，概括为linear-gradient([<角度> | to <方向>]?, <颜色> <位置>?, ...) 可以提供额外的色标（%）实现自定义渐变

效果展示

这个demo实现很简单，就是一个方位值和俩个颜色参数，像类似这样 background-image: linear-gradient(to top left, #3f87a6, #f69d3c);

html结构划分

需要注意的点

<input type='color' value="..."> 是颜色选择器，可选RGB，hSL，HEX；value是默认值
<textarea rows="2"></textarea> 文本框，输入区域设置默认显示2行文本
<i class="fas fa-arrow-up"></i> 箭头图标通过CDN引入 font-awesome

实现代码

<div class="container">
			<div class="colors">
				<input type="color" id="color-a" value="#7986cb" />
				<input type="color" id="color-b" value="#1a237e" />
			</div>
			<div class="buttons">
				<button onclick="setDirection('to top', this)">
					<i class="fas fa-arrow-up"></i>
				</button>
				<button class="active" onclick="setDirection('to bottom', this)">
					<i class="fas fa-arrow-down"></i>
				</button>
				<button onclick="setDirection('to right', this)">
					<i class="fas fa-arrow-right"></i>
				</button>
				<button onclick="setDirection('to left', this)">
					<i class="fas fa-arrow-left"></i>
				</button>
				<button class="rotate-icon" onclick="setDirection('to top right', this)">
					<i class="fas fa-arrow-up"></i>
				</button>
				<button class="rotate-icon" onclick="setDirection('to bottom left', this)">
					<i class="fas fa-arrow-down"></i>
				</button>
				<button class="rotate-icon" onclick="setDirection('to bottom right', this)">
					<i class="fas fa-arrow-right"></i>
				</button>
				<button class="rotate-icon" onclick="setDirection('to top left', this)">
					<i class="fas fa-arrow-left"></i>
				</button>
			</div>
			<button id="submit" onclick="generateCode()">Generate</button>

			<div class="code-container">
				<textarea id="code" rows="2"></textarea>
				<button id="copy" onclick="copyStyles()">Copy</button>
			</div>
		</div>

		<script src="index.js"></script>
	</body>

css样式

需要注意的点

font-awesome其实只有上下左右四个方向的箭头，给上下左右方向的箭头旋转45度就有其他四个方向辽 transform: rotate(45deg);
.container *:not(i) { } 表示container元素下的所有子元素（*），但不包括 <i>标签元素应用这个样式
input[type='color']::-webkit-color-swatch { } 用webkit定义颜色选择器（swatch）的样式
点击Copy会有个animation, 动画周期到50%处button放大1.1倍

主要css

.container {
	background-color: #fff;
	width: 400px;
	padding: 50px 30px;
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	border-radius: 10px;
	box-shadow: 0 20px 25px rgba(0, 0, 0, 0.25);
}
.container *:not(i) {
	font-family: 'Rubik', sans-serif;
}
input[type='color']::-webkit-color-swatch {
	border-radius: 20px;
	border: none;
}
.buttons .active {
	border: none;
	background-color: var(--bg);
	color: #fff;
}
.rotate-icon i {
	transform: rotate(45deg);
}
#submit {
	display: block;
	background-color: var(--bg);
	color: #fff;
	font-size: 16px;
	padding: 12px 70px;
	border-radius: 25px;
	margin: 0 auto 30px auto;
	cursor: pointer;
}
.animation {
	animation: animate 1s linear;
}
@keyframes animate {
	50% {
		transform: scale(1.1);
	}
}

js

当点击Generate按钮时需要把样式应用到<body>上

给按钮绑定generateCode方法

generateCode

获取DOM元素value值，然后拼装成linear-gradient参数params
DOM.style.语法给DOM添加linear-gradient 样式
DOM.textContent语法替换code-container中的文字框文本

const colorOne = document.getElementById('color-a')
const colorTwo = document.getElementById('color-b')
const styles = document.getElementById('code')
const copyButton = document.getElementById('copy')
let currentDirection = 'to bottom'
function generateCode() {
	const params = `linear-gradient(${currentDirection}, ${colorOne.value}, ${colorTwo.value})`
	styles.textContent = 'background-image:' + params
	document.getElementsByTagName('body')[0].style.backgroundImage = params
}

setDirection

给每个方向键绑定setDirection setDirection是这样调用的onclick="setDirection('to bottom right', this)" ，其中this即当前DOM元素，选中被点击时添加active样式

function setDirection(value, _this) {
	const direcrtions = document.querySelectorAll('.buttons button')
	for (let i of direcrtions) {
		i.classList.remove('active')
	}
	_this.classList.add('active')
	currentDirection = value
}

copyStyles

和上篇文章一样，直接复制过来咯

当我们点击复制样式按钮时，通过 Clipboard Api实现复制到剪切板
.then等待执行完，copyButton直接添加animation样式，更换innerText
再用setTimeout1s之后移除animation和复原innerText

function copyStyles() {
	styles.select()
	const textToCopy = styles.value
	navigator.clipboard
		.writeText(textToCopy)
		.then(() => {
			copyButton.innerText = 'Copied！🎉'
			copyButton.classList.add('animation')
			setTimeout(() => {
				copyButton.innerText = 'Copy'
				copyButton.classList.remove('animation')
			}, 1000)
		})
		.catch(() => {
			copyButton.innerText = 'Copy failed'
		})
}

代码片段

linear-gradient推荐网站

gradient.shapefactory.co调配的颜色很米，左边还有亮度和颜料调节，也可自己着色，一键COPY！

参考

gradient.shapefactory.co/
developer.mozilla.org/zh-CN/docs/…
www.w3schools.com/cssref/func…