linear-gradients 相关问题

如何在 Tailwind CSS 中向文本/标题添加线性渐变？我只能使用以下方法将其添加到背景：如何在 Tailwind CSS 中向文本/标题添加线性渐变？我只能使用以下方法将其添加到背景： <h2 className="text-4xl w-full text-white font-extrabold bg-gradient-to-r from-sky-500/20 to-sky-500/75"> Welcome To <br /> My Personal PortFolio </h2> 经过一个小时的忙碌，我找到了方法。 <h2 className="text-4xl w-full text-transparent bg-clip-text font-extrabold bg-gradient-to-r from-white to-sky-500/10 p-2"> Welcome To <br /> My Personal PortFolio </h2> 像这样上课 class:"text-base font-bold whitespace-nowrap text-transparent bg-clip-text bg-gradient-to-br from-yellow-400 to-yellow-500" 添加 -webkit-background-clip: text; /* apply background clip */ -webkit-text-fill-color: transparent; 使您的文本剪辑渐变 h2 { font-size: 48px; font-weight: 800; margin: 0; } h2.gradient-text { background: -webkit-linear-gradient(45deg, #09009f, #00ff95 80%); -webkit-background-clip: text; /* apply background clip */ -webkit-text-fill-color: transparent; } <h2 class="gradient-text text-4xl w-full text-white font-extrabold bg-gradient-to-r from-sky-500/20 to-sky-500/75"> Welcome To <br /> My Personal PortFolio </h2> 总结您的答案。在3.3.2版本中测试。您应该添加text-transparent、bg-clip-text、背景渐变类（例如bg-gradient-to-r）、渐变颜色停止（例如from-pink-500、to-violet-500）。  <span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500"> Hello world </span>  <span class="bg-clip-text text-transparent bg-gradient-to-r from-[#ef4444] to-[#0f766e]"> Hello world </span>  <span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 from-5% to-violet-500 to-70%"> Hello world </span>  <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%"> Hello world </span> 代码只是bg-gradient-to-rfrom-<color>to-<color>bg-clip-texttext-transparent。 <!DOCTYPE html> <html lang="en"><head><script src="https://cdn.tailwindcss.com"></script></head> <body> <h1 class="inline-block text-6xl font-bold bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent">Gradient Text</h1> </body> </html> 说明创建渐变彩色文本：在带有文本的 HTML 元素上创建渐变色背景使背景采用该文本的形状最后使文本本身透明，这样只有文本形状的渐变色背景可见与这些步骤对应的 Tailwind 类是： bg-gradient-to-rfrom-pink-500to-violet-500 bg-clip-text text-transparent 请注意，代码片段中的inline-block设置在h1上，因此渐变色背景不会占用整个可用页面宽度，而仅占用文本宽度。有关渐变颜色停止点的Tailwind 文档中描述了更多自定义选项，例如具有中间颜色（位于from和to颜色之上）或指定颜色停止位置。 Tailwind CSS 文档中的渐变文本截至今天，即 2024 年 8 月，Tailwind 在其官方文档中提供了渐变文本示例。它很难找到，因为他们将其呈现为“将背景裁剪为文本”的示例，而不是呈现为“线性渐变彩色文本”。在线生成渐变文本的 Tailwind CSS 有些网站可让您配置渐变文本并为您生成相应的 Tailwind CSS 代码，例如Creative Tim 的 Tailwind CSS 渐变生成器：

css tailwind-css linear-gradients

回答 5 投票 0

为什么 LinearGradient() 在 ZStack > NavigationStack 中无法工作？

我是 SwiftUI 的新手，希望了解为什么 LinearGradient() 在应用于 ZStack 和 NavigationStack 时不起作用。任何指导将不胜感激！ var body: 一些视图 { ...

swiftui linear-gradients swiftui-navigationstack swiftui-zstack

回答 1 投票 0

如何让我的线性渐变在 Chrome 和 Firefox 上看起来一致

这就是 Chrome 上的样子这就是它在 Firefox 上的样子这是我的 CSS 块： .颜色图例{ 宽度：100px；高度：20px；背景：线性梯度( 向右

html css linear-gradients

回答 1 投票 0

渐变色容器

我想要的输出如何创建这种具有渐变颜色的容器？我试图构建它但无法实现。这是我所做的容器（装饰：BoxDeco...

flutter containers linear-gradients

回答 1 投票 0

如何使用 CSS 制作渐变动画

我想平滑地移动具有多种颜色的渐变，但问题是动画不平滑。它只是在每一步改变它的位置。 .动画{ 宽...</desc> <question vote="58"> <p>我想平滑地移动具有多种颜色的渐变，但问题是动画不平滑。它只是在每一步改变它的位置。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><style> .animated { width: 300px; height: 300px; border: 1px solid black; animation: gra 5s infinite; animation-direction: reverse; -webkit-animation: gra 5s infinite; -webkit-animation-direction: reverse; animation-timing-function: linear; -webkit-animation-timing-function: linear; } @keyframes gra { 0% { background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(21%, #ff670f), color-stop(56%, #ffffff), color-stop(88%, #0eea57)); background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%); background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%); } 50% { background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(10%, #ff670f), color-stop(40%, #ffffff), color-stop(60%, #0eea57)); background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%); background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%); } 100% { background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(5%, #ff670f), color-stop(10%, #ffffff), color-stop(40%, #0eea57)); background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%); background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%); } } </style> <div class="animated"> <h1>Hello</h1> </div></code></pre> </div> </div> <p></p> <p>是否可以不使用 jQuery 来完成？</p> <p>我的jsfiddle链接是<a href="https://jsfiddle.net/bAUK6" rel="noreferrer">https://jsfiddle.net/bAUK6</a></p> </question> <answer tick="true" vote="66"> <p>请尝试此代码：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>#gradient { height:300px; width:300px; border:1px solid black; font-size:30px; background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00); background-size: 200% 200%; -webkit-animation: Animation 5s ease infinite; -moz-animation: Animation 5s ease infinite; animation: Animation 5s ease infinite; } @-webkit-keyframes Animation { 0%{background-position:10% 0%} 50%{background-position:91% 100%} 100%{background-position:10% 0%} } @-moz-keyframes Animation { 0%{background-position:10% 0%} 50%{background-position:91% 100%} 100%{background-position:10% 0%} } @keyframes Animation { 0%{background-position:10% 0%} 50%{background-position:91% 100%} 100%{background-position:10% 0%} }</code></pre> <pre><code><html> <div id="gradient"> Hello </div> </html></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="19"> <p>使用 CSS 变量现在是一项微不足道的任务。</p> <p>这是一个基本示例（将鼠标悬停以查看结果）</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>@property --a{ syntax: '<angle>'; inherits: false; initial-value: 90deg; } @property --l{ syntax: '<percentage>'; inherits: false; initial-value: 10%; } @property --c{ syntax: '<color>'; inherits: false; initial-value: red; } .box { /* needed for firefox to have a valid output */ --a:80deg; --l:10%; --c:red; /**/ cursor:pointer; height:200px; transition:--a 0.5s 0.1s,--l 0.5s,--c 0.8s; background:linear-gradient(var(--a), var(--c) var(--l),blue,var(--c) calc(100% - var(--l))); } .box:hover { --a:360deg; --l:40%; --c:green; }</code></pre> <pre><code><div class="box"></div></code></pre> </div> </div> <p></p> <p>我的文章中的更多详细信息：<a href="https://dev.to/afif/we-can-finally-animate-css-gradient-kdk" rel="nofollow noreferrer">https://dev.to/afif/we-can-finally-animate-css-gradient-kdk</a></p> </answer> <answer tick="false" vote="16"> <p>动态实现<a href="https://stackoverflow.com/a/29609388/5164462">Dave的回答</a>：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code>:root{ --overlay-color-1: #ff0000; --overlay-color-2: #0000ff; --anim-duration: 2s; } #gradient { opacity: 0.8; background: none; } #gradient:after, #gradient:before { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #gradient:before { background: linear-gradient(135deg, var(--overlay-color-2) 0%, var(--overlay-color-1) 100%); animation: OpacityAnim var(--anim-duration) ease-in-out 0s infinite alternate; } #gradient:after { background: linear-gradient(135deg, var(--overlay-color-1) 0%, var(--overlay-color-2) 100%); animation: OpacityAnim var(--anim-duration) ease-in-out calc(-1 * var(--anim-duration)) infinite alternate; } @keyframes OpacityAnim { 0%{opacity: 1.0} 100%{opacity: 0.0} }</code></pre> <pre><code><div id="gradient"></div></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="2"> <p>这是另一种方法。下面的静态渐变包含动画的所有阶段，然后将其移动到外部元素内。这允许平滑地执行动画（如主题所示），因为这里唯一的动画是元素位置。</p> <p>请注意，为了性能的考虑，渐变元素保持不变。虽然问题是对渐变进行动画处理，但移动背景实际上可以做同样的事情，而且性能更胜一筹！</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>.animated { width: 300px; height: 300px; overflow: hidden; position: relative; border: 1px solid black; } .innerGradient { z-index: -1; width: 300%; height: 300%; position: absolute; animation: gra 5s infinite; -webkit-animation: gra 5s infinite; background: linear-gradient(135deg, #ff670f 0%, #ff670f 20%, #ffffff 50%, #0eea57 80%, #0eea57 100%); background: -webkit-linear-gradient(135deg, #ff670f 0%, #ff670f 20%, #ffffff 50%, #0eea57 80%, #0eea57 100%); } @keyframes gra { 0% { left: -200%; top: -200%; } 50% { left: 0%; top: 0%; } 100% { left: -200%; top: -200%; } }</code></pre> <pre><code><div class="animated"> <h1>Hello</h1> <div class="innerGradient"></div> </div></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>这个怎么样：</p> <p>将正文边距和填充设置为 0。将 html 规则设置为 100% 高度（可能需要高于 100%）。</p> <p>将主体设置为渐变的结束状态。</p> <p>创建一个空的 div，其背景是渐变的开始状态。给空 div 100% 高度。</p> <p>给主体和空 div 一个背景附件：固定；</p> <p>为您的正文内容创建一个包装。</p> <p>将空div设置为position:fixed；将包装器设置为位置：相对；给两个 z-index，包装器更高。</p> <p>创建一个动画，在所需的时间内将空 div 的不透明度从 1 更改为 0。添加动画填充模式：前进；遵守 div 规则，以便动画保持在结束位置。</p> <p>它不像真正的动画渐变移动那么性感，但我认为它很简单，只需使用 CSS 和关键帧即可实现。</p> </answer> </body></html>

html css css-animations linear-gradients

回答 0 投票 0

如何使用CSS创建一个带有渐变边框和透明内部区域的圆形

我正在尝试使用 CSS 创建一个圆圈，它具有渐变边框，但也有一个透明的内部区域，使其看起来像这样：如果内部不是，有一些解决方案可以创建渐变边框

css linear-gradients

回答 3 投票 0

.NET MAUI 中的动画渐变画笔？

所以，我正在尝试创建一个带有动画渐变颜色的边框并存档 rgb 效果。不知何故，颜色只是静态的（如下图所示），它根本没有动画，这就是我......

.net animation maui linear-gradients

回答 1 投票 0

不需要的背景渐变边框

我正在创建具有渐变颜色行为的简单聊天框，就像在信使上一样。我做到了，但在某些分辨率上我可以看到无水的“边界”。一开始我认为这是一些开发工具的问题......