Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap"); :root { --stop1: #b3ffce; --grad-hint: 40%; --stop2: #9e5ac9; } .gradient-viz { display: block; width: 100%; height: 4rem; background: linear-gradient(to right, var(--stop1), var(--grad-hint), var(--stop2)); } .gradient-hint { width: 100%; } code { display: block; border: 1px solid lightgray; background: #f3f3f3; padding: 1.5rem; font-family: 'IBM Plex Mono'; font-size: 1.25rem; } .container { max-width: 600px; margin: 2rem auto; position: relative; padding: 0 1.7rem; } .color-select { appearance: none; position: absolute; top: 0; border: 1px solid; outline: none; width: 25px; height: 3.9rem; padding: 0; overflow: hidden; background: none; cursor: pointer; } input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } input[type="color"]::-webkit-color-swatch { border: none; } .stop1 { left: 0; background: var(--stop1); } .stop2 { right: 0; background: var(--stop2); } body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;background-color: #313131; }
JavaScript
document.querySelector('.gradient-hint').addEventListener('input', (e) => { document.documentElement.style.setProperty('--grad-hint', e.target.value + '%') updateCode() }) document.querySelector('.stop1').addEventListener('input', (e) => { document.documentElement.style.setProperty('--stop1', e.target.value) updateCode() }) document.querySelector('.stop2').addEventListener('input', (e) => { document.documentElement.style.setProperty('--stop2', e.target.value) updateCode() }) updateCode = () => { const body = window.getComputedStyle(document.body) const codeBlock = document.querySelector('.gradient-output') codeBlock.innerText = `background: linear-gradient(to right, ${body.getPropertyValue('--stop1')}, ${body.getPropertyValue('--grad-hint')}, ${body.getPropertyValue('--stop2')})` } updateCode()
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>css渐变颜色生成-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号