程序员经验分享-hwhale

在 CSS/Jquery 中创建渐变网格

2024-01-07

I'm not sure if this is possible or not, but can I use CSS/Jquery techniques to create a gradient mesh? Something similar to this enter image description here

我想随机生成这个网格，然后可能对其进行动画处理，所以我试图避免使用图像。我不确定这样的事情是否可能。

我在想也许创建几层单独的渐变，然后将它们全部分层到一个固定位置并更改它们的不透明度设置？


现在

几年前，我使用 SVG、HTML5 canvas 标签以及最近的 CSS3 渐变进行了类似的尝试。我认为目前没有一种自然的方法可以超越简单的线性或径向渐变。

问题是是否可以仅使用简单的线性和径向渐变（这是唯一可用的工具）来模拟网格渐变。

不幸的是，当您使用不透明度或 rgba 组合多个渐变时，不同渐变的颜色往往会以无用的方式组合，从而导致颜色褪色。避免这种情况需要能够在浏览器中将其渲染为单个复杂的渐变。

渐变的形状也有很大的限制——任意角度的线性渐变，以及径向对称的椭圆渐变。两者都不允许自由形状、不规则形状。可应用于生成图像的 2D 变换本质上也是相当规则的（缩放、倾斜等）。

将来

我所知道的在不久的将来最有前途的选择是 SVG 2.0 中对网格渐变的可能支持（也许还有扩散曲线）。如果这种情况确实发生并且最终得到浏览器的支持，那么选项应该会开始大大扩展。 HTML5 canvas 标签和 CSS3 可能很快就会出现。

正如 @vals 在下面的评论中指出的那样，WebGL 应该提供一些非常有前途的选项（对于使用 3D 上下文的 HTML5 画布标签）。

相关链接

  • http://www.svgopen.org/2011/papers/18-Advanced_Gradients_for_SVG/ http://www.svgopen.org/2011/papers/18-Advanced_Gradients_for_SVG/
  • http://w3-org.9356.n7.nabble.com/Diffusion-Curves-td146288.html http://w3-org.9356.n7.nabble.com/Diffusion-Curves-td146288.html
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery

css

在 CSS/Jquery 中创建渐变网格 的相关文章

  • 如何确定当前使用哪个网格选项

    我将 Bootstrap 3 用于使用 PHP 和 HTML 创建的网页 随着响应式网格和类的开启引导程序3您可以将多个类分配给一个 div 以根据当前屏幕尺寸定义不同的宽度 例如 div class col lg 3 col md 3 c

  • JQuery nth-child 无法正常工作

    我正在使用 JQuery 的 nth child 选择器来使用 photo post thumbnail 类来更改每个第 3 个 div 上的边距 但它会在每个第 2 个 div 中更改它 谁能发现我做错了什么吗 Site http www

  • 检查外部 JS 库是否已加载[重复]

    这个问题在这里已经有答案了 我当前的设置是用户单击链接来动态加载内容 其中还包括加载脚本 我希望能够测试是否加载了外部脚本 特别是 Google Maps JS API 如果没有加载 则继续执行此操作 这是我的代码 if href cont

  • PHP、jQuery 和 Ajax 调用乱序

    我正在使用 jQuery 进行 Ajax 调用 我有 x 数量的 Ajax 调用附加到 div 这些 Ajax 加载请求是由 PHP foreach 循环生成的 问题是它们渲染的顺序不正确 它们被设置在数组中

  • 滚动时将菜单栏固定在顶部[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我见过一些网站 当用户向下滚动页面时 会在右侧或左侧弹出一个框 另外 注意到这个模板 http www mvpthemes com m

  • 反馈选项卡，如 www.monyta.com [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我有兴趣添加一个在我的页面上托管的反馈选项卡 没有第三方 如 uservoice monyta gets

  • Internet Explorer 中的锯齿状按钮边缘

    如何去除 Internet Explorer 中宽按钮的锯齿状边缘 例如 您还可以通过设置来消除 Windows XP 的按钮样式 以及 Windows 的所有其他版本 background color and or border colo

  • 如何处理 AJAX 请求中的会话超时

    我相信你们都熟悉使用 AJAX 的投票系统 嗯 看那边 我有类似的东西 当你投票赞成或反对时 它使用 AJAX 从 votes php 请求新值 问题是我正在使用会话来获取用户 ID 因此一个人只能投票一次 如果他们在页面上坐了一个小时然后

  • jquery中如何使用load函数发送数据

    我想用 jquery load 函数发送字符串数据 但它没有发送 我的代码是 function dialog data function alert data var ph Org1 ph empty ph load FrontEnd Do

  • JQuery Datepicker OnSelect 和 TextChanged 问题

    自从将 OnSelect 添加到我的 Datepicker 后 该控件不再触发 TextChanged 事件 我的代码如下 function datepicker minDate 0 dateFormat dd M yy onSelect

  • 如何在通过 .ajaxForm() 提交表单之前执行一些操作？

    我正在使用 ajaxForm 框架来发送我的数据 而无需重新加载我的页面 ReplayForm ajaxForm success function data alert Success 现在 我想在提交表单之前检查一些条件 如果条件为假 则

  • 在 jQuery .live() 方法中模拟“焦点”和“模糊”

    Update 从 jQuery 1 4 开始 live 现在支持focusin and focusout events jQuery http www jquery com currently1 doesn t support blur o

  • 将纯文本转换为 HTML

    我有一个脚本 在某个时刻我可以通过 Ajax 调用获取 HTML 数据 我必须将此 HTML 转换为纯文本 如下所示 div text data 我现在想扭转这一局面 再次将文本设为 HTML 我有一个简单的 Jquery 方法可以做到这一

  • 如何立即启动setInterval循环？ [复制]

    这个问题在这里已经有答案了 在一个简单的setInterval setInterval function Do something every 9 seconds 9000 第一个动作将在 9 秒后发生 t 9s 如何强制循环立即执行第一个

  • 使用 CSS 网格布局使网格项内的元素高度相等

    我在长度超过 4 的 div 中有一系列文章 没有任何舍入行标签 我需要将其表示为每行 3 篇文章 列 的表格 可能包含display grid 每篇文章都有页眉 章节和页脚 如何在每行文章内实现每个标题的等高 每个部分的等高以及与文章底部

  • CSS 网格框架中的间距有什么作用？

    我正在深入研究 Web 开发 并且正在使用 Blueprint CSS 框架 其中包括网格系统 我有几个问题 水沟有什么用处 当然 它们不用于在列之间包含空间 因为您可以使用 margin CSS 属性来实现这一点 对吗 或者排水沟只是一种

  • 如何通过 jQuery 中的类获取特定 html 元素的innerHTML？

    我有这样的 HTML 代码 div class a html value 1 div div class a html value 2 div 我怎样才能访问html value 1 and html value 2使用jquery 分别地

  • 适用于移动设备的响应式订单确认电子邮件？

    我从未见过令人惊叹的订单确认 发票电子邮件 即使是最好的 html5 网站也会发送糟糕的订单确认电子邮件 有时是纯文本 我相信这是因为发票通常需要使用表格来显示购买的物品 这在移动设备上实现起来非常困难 我发现了一些让手机上的表格更易于管理

  • 如何简化这个 LESS CSS Box-shadow mixin？ （带有“方向”的多个阴影）

    如何减少这段代码 可能使用循环 以拥有一个接受方向和数字的 函数 dir 想要的 方向 number 我需要多少次影子 这里是10次 color 阴影的颜色 Example 可以工作 但不是很容易使用 perspective box dir

  • ng-include 和 ng-view 不同时加载

    下面是我的应用程序的结构 很简单 页眉和页脚是非常小的文件 而主页上的 ng view 要大得多 当我进入该页面时 我注意到了这一点 首先加载两个 ng include 然后 ng view 出现 页脚被推到底部 页脚闪烁大约 0 1 秒

随机推荐

热门标签