带有渐变的CSS3动画[重复]

Posted 2023-03-06

【中文标题】带有渐变的CSS3动画[重复]

【英文标题】：CSS3 animation with gradients [duplicate]

【发布时间】：2011-08-05 00:00:09

【问题描述】：

真的没有办法用 CSS 为渐变背景设置动画吗？

类似：

@-webkit-keyframes pulse 
  0% 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
  
  50% 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(222,252,255)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
  
  100% 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
  

我知道，对于 Safari 5.1+ 和 Chrome 10+，有一个新的渐变语法，但现在，我必须为这个项目坚持旧的。

【问题讨论】：

你不能改css什么的？

? …如果我在一个元素上运行这个动画，什么都不会发生（-webkit-animation: pulse 1s infinite;）

我认为它不适用于渐变，即使使用新语法

我刚刚学会了这一点！线性渐变上的过渡还不起作用

transitions 没有，但 transforms 有，所以你至少可以平移/旋转/倾斜它们，即codepen.io/philipphilip/pen/OvXEaV

【参考方案1】：

webkit 渐变尚不支持过渡。它在规范中，但它还没有工作。

（p.s. 如果您只进行颜色转换 - 您可能需要查看 -webkit-filters - 可以制作动画！）

更新：渐变过渡显然在 IE10+ 中有效

【讨论】：

它在 new 语法的规范中，不是专有的 -webkit-gradient() 废话。

AFAIK 尚不支持渐变过渡——即使是支持新语法的过渡。

顺便说一句，如果你愿意使用 SVG——那么渐变过渡就很不错——只要你使用的是最新的浏览器。见srufaculty.sru.edu/david.dailey/svg/Stwelve.svg

【参考方案2】：

您应该查看 css 砂纸 - 这可以让您实现动画渐变，但它不是纯 css 解决方案。 Css 砂纸负责渐变的跨浏览器渲染，还有一段 javascript 处理动画。

http://www.useragentman.com/blog/2010/04/05/cross-browser-animated-css-transforms-even-in-ie/

【参考方案3】：

将每个渐变变化放在它自己的图层上。绝对定位它们。给每个它自己的一组彼此同步的关键帧。在这些关键帧中，为每个层、每个关键帧定义不透明度，在关键帧之间混合 1 和 0。

注意容器的颜色会渗出，因此将图层包裹在具有白色背景的父级中。

http://jsfiddle.net/jSsZn/

【讨论】：

这确实很聪明——但你只需要额外的元素来设置样式（对我来说不行），在大多数情况下这是不可能的，因为你将渐变作为元素的背景传递它自己的。但是感谢这个创造性的解决方案——现在这似乎是动画——至少是“假”——动画——渐变的唯一方法之一。

这里真的很聪明。

【参考方案4】：

@Brian 不使用新的 html 元素，而是使用 sudo 元素 :before 和 :after。将主元素定位为相对，然后将伪元素定位为绝对，上、左、右、下分别为 0。

HTML：

<div></div>

CSS：

div 
    width: 200px;
    height: 200px;
    position: relative;


div::before, div::after 
    display: block;
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;

使用不透明度将关键帧和渐变添加到 div 和伪元素。使用 z-index 来控制哪个在哪个之上。

【参考方案5】：

我通过应用 :before 归因于 a 标签解决了这个问题。

链接：http://codepen.io/azizarslan/pen/xsoje

CSS：

nav ul#menu li a 
    display: block;
    position: relative;
    z-index: 1;

    /* webkit gradient background */
    background: -webkit-linear-gradient(top, rgb(204, 0, 51), rgb(153, 0, 0));


nav ul#menu li a:before 
    width: 100%;
    height: 100%;
    display: block; 
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;

    /* webkit gradient background */
    background: -webkit-linear-gradient(top, rgb(0, 156, 204), rgb(0, 111, 145));

    /* webkit transition */
    -webkit-transition: all 250ms linear;

    /* before hack */
    content: ".";
    text-indent: -99999px;


nav ul#menu li a:hover:before 
    opacity: 1;

【讨论】：

很好的解决方法。我也让它在 IE 10 和 11 中工作。它在 IE 9 上已经足够好后备（没有平滑过渡，但悬停效果都一样），但如果 IE 8 或更早的声明，早期版本可能需要兼容性后备。

【参考方案6】：

如果您正在寻找文本从纯色到渐变的过渡。只需对文本的 rgba 颜色进行动画处理，即可显示应用在其上的背景渐变。

CSS：

.button 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fe046e), color-stop(100%,#a02ed4));
    -webkit-background-clip: text;
    color: rgba(255,255,255,1);

    -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;


.button:hover 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fe046e), color-stop(100%,#a02ed4));
    -webkit-background-clip: text;
    color: rgba(255,255,255,0);