CSS背景渐变动态动画

文章/答案/技术大牛

发布

1回答

类更改时引导动画按钮样式

javascript、css、twitter-bootstrap、css-transitions

当我更改.btn按钮的类时，我想要动画背景，例如，从加载的.btn-.btn传递到.btn-success或.btn-danger。现在，如果我将-webkit-transition: background 1s线性添加到.btn类，并使用js切换类，则更改不是动态的 (有趣的是:我尝试只在chrome元素检查工具中添加css转换指令更新:如果按钮处于禁用模式，转换工作，也许问题是由于使用css3渐变作为背景图像，这可能是-webkit-transition不支持的？

浏览 2提问于2012-08-31得票数 1

回答已采纳

2回答

为什么按钮没有显示任何淡入淡出效果？

html、css

我正在尝试编写一个按钮，在悬停时，将产生一个缓入-出效果。我使用了以下代码：padding:20px;/* fallback/image non-cover color *//* Safari 4+, Chrome 1-9 *//* Safari 5.1+, Mobile Safari, Chrome 10+ *

浏览 5提问于2012-07-22得票数 0

回答已采纳

1回答

可以在带有混合混合模式的动画画布后面使用静态背景吗？

css、animation、canvas、mix-blend-mode

我正在尝试创建一个动画，其中每个元素都会根据父div的背景改变其颜色。我正在使用制作动画。它把所有东西都画在画布上。

浏览 18提问于2019-10-23得票数 0

回答已采纳

1回答

css、css-animations

我有一个带有背景渐变动画的页面。ready(function() {}); $('.bg-gradient').css6; i++) { }} 颜色会发生变化，但不会应用动画

浏览 30提问于2020-12-02得票数 1

回答已采纳

1回答

没有Css转换的可能

html、css

我正在努力为我的按钮创建一个很好的过渡。我在一个红色的div上测试了使用的模式，它有效！但在我的按钮上它不会。 max-width: 240px; border: 1px solid #cd8102; height: 36px; fon

浏览 1提问于2014-10-10得票数 0

回答已采纳

3回答

背景透明的Css3过渡在Chrome5中不起作用

html、webkit、css

我正在尝试使用CSS3转换创建动画。动画是一个渐变背景，应该改变他的颜色(rgba)。}但是我只能用这个版本的chrome来动画化<em

浏览 0提问于2010-06-01得票数 3

1回答

CSS渐变动画不起作用

html、css、gradient

我正在尝试制作动态的CSS渐变背景，我在这个页面上生成渐变的css：这里是CSS：background: linear-gradient(270deg, #18f0b8, #18a2f0background-position:0% 50%} 100%{background-position:0% 50%}} 它输出渐变很好，但它不会动画</

浏览 0提问于2015-05-21得票数 6

回答已采纳

1回答

当用作背景图像时，SVG内部的Web动画中断

javascript、css、svg、background-image、web-animations

我只是用在线服务为自己生成了一个基于SVG的加载指示器，但是每次使用它的页面加载时，我都会收到Chrome的警告，它告诉我SMIL动画受到了反对，这是相当令人讨厌的。为了摆脱它，我决定考虑用网络动画代替<animate>标签。{ duration: 2000, iterations: Infinity } ]]></script> 我要为我的成功而感到非常兴奋，当我注意到在CSS中用作background-image时，这个完全相同的SVG完全

浏览 2提问于2016-07-29得票数 1

回答已采纳

2回答

使用百分比值创建CSS动画关键帧

html、css

我正在尝试CSS关键帧动画和webkit径向渐变背景。我想在身体标签上有一个发光的圆形/radial梯度，3秒后径向梯度移动到右侧并消失。在我的实验中，我发现在关键帧动画中，你不能为每个阶段创建不同值的渐变，比如0%，25%，50%，100%。我的HTML文件张贴在这里，请看一下。

浏览 5提问于2011-01-05得票数 0

1回答

如何创建像谷歌+1Button onHover那样的微光动画

html、animation、css、webkit

你会注意到图像中有一种微光的动画吗？就像一束光穿过图像。他们使用的是图像，但我想知道如何在CSS3中做到这一点。对on hover有什么想法吗？还有，有人知道这种效应叫什么吗？谢谢

浏览 0提问于2011-08-06得票数 2

2回答

CSS线性梯度背景随时间的变化

javascript、html、css

我想创建一个渐变背景的div (从上到下的2种颜色)，它会随着时间的推移而改变颜色。例如，，：div有一个红色(顶部)和蓝色(底部)线性梯度背景，我希望它在十分钟后逐渐变成黄色(顶部)和紫色(底部)。重要的：当10分钟过去时，背景不能突然改变，而必须在整个10分钟的时间内一点一点地改变。，我需要：我应该做的是改变背景，以最真实的方式重现天空的颜色。所以，有了日落，日出，白天和夜晚的时间，以及它们各自的持续时间，我想改变背景的颜色，在一天中的那些时刻重新创造天空。其结果

浏览 12提问于2022-07-29得票数 0

3回答

使用html、css的网页的混合背景色

html、css、bootstrap-4

谁能告诉我如何使用html，css或bootstrap的网页混合背景颜色。这有什么属性吗？我经历了背景混合模式，但这不是我要找的。我正在尝试创建我的整个网页的背景颜色，类似于下面的网站：

浏览 1提问于2019-11-07得票数 0

1回答

CSS梯度动画

css、css-transitions、gradient

我试图动画的CSS梯度，如描述的，但我无法使它工作。举个例子，我把放在一起了。它真的可以动画一个CSS3梯度，还是我做错了什么？任何帮助都是非常感谢的。

浏览 2提问于2013-09-01得票数 4

回答已采纳

1回答

带有CSS的动画网格梯度

html、css、animation、gradient、figma

我想制作一个像这样的背景动画梯度。它可以用纯CSS完成吗？或者什么是好的解决方案？

浏览 9提问于2022-08-16得票数 0

2回答

CSS-只有渐变颜色的ProgressBar，突出当前状态。

css、progress-bar

我在寻找只有CSS的ProgressBar，它用渐变和动画来显示这样的活动。所需的是：如果它也具有不可终止的状态，可能会很有趣。

浏览 0提问于2018-12-28得票数 3

1回答

UIView实时复制另一个视图的CAAnimation？

swift、animation、cabasicanimation、cagradientlayer、catransaction

所以我有一个带有渐变子层的背景视图，不断地动画来缓慢地改变颜色。CATransaction.setCompletionBlock({} 现在我想复制这个渐变动画注1:如果可能的话，我不能只是在按钮上“打一个洞”，因为我可能会在按钮和背景之间有其他不透明的视图。注2:按钮上的渐变位置不重要。我不希望文本渐变<

浏览 17提问于2019-11-27得票数 2

回答已采纳

1回答

如何在CSS中执行此背景过渡

css、animation、linear-gradients

我如何使用动画的线性渐变作为背景，因为它是在这个视频：？我尝试了一种渐变技术，背景尺寸很大，我对背景位置属性进行了动画处理，但并不成功。如何使用background-position属性设置一个好的动画，使每个图像都有一个渐变。

浏览 2提问于2020-11-11得票数 1

2回答

背景过渡不起作用，无到img，css

javascript、jquery、css

在此处输入代码我正在尝试以下操作： >>position: relative; >>margin: 0px auto 0px auto; >&g

浏览 0提问于2013-12-13得票数 0

2回答

火狐背景图像的CSS3转换不起作用

firefox、css、css-transitions

我的背景-图像转换在Chrome中工作得很好，但在Firefox中却不起作用。我是CSS3转换的新手。我做了研究，我的语法似乎是正确的。据我所知，FF应该支持这一点。我在FF 12.0。为什么这个CSS3转换在火狐中不起作用。没有javascript。没有变通方法。仅仅是解释一下为什么这是失败的就太好了。

浏览 1提问于2012-04-28得票数 5

回答已采纳

3回答

CSS渐变动画

jquery、jquery-ui、css

我有一个按钮(锚)上有一个CSS3渐变。有什么想法吗？谢谢!

浏览 1提问于2011-07-05得票数 7

回答已采纳

点击加载更多

类更改时引导动画按钮样式

为什么按钮没有显示任何淡入淡出效果？

可以在带有混合混合模式的动画画布后面使用静态背景吗？