正文

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

 2023-03-06  282

关键词：

【中文标题】带有渐变的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);

【讨论】：

CSS3 动画不适用于 Firefox 中的渐变背景

】CSS3动画不适用于Firefox中的渐变背景【英文标题】：CSS3animationnotworkingwithgradientbackgroundinFirefox【发布时间】：2016-06-1204:38:12【问题描述】：我已经查看过有关该主题的现有帖子，但这些解决方案不起作用。我有一个简单的CSS3背... 查看详情

css3新属性的总结

...新样式，先列一个简单的提纲，重要的还是圆角、阴影、渐变、文字缩略，最最重要的是过度transition，变换transform和animation圆角阴影渐变圆形渐变线性渐变跳变重复渐变蒙版倒影滤镜多背景文字方向文字缩略过渡transition 变换... 查看详情

css3实现渐变

...）由中心定义从上到下的线性渐变如何创建一个带有彩虹颜色和文本的线性渐变从左到右的线性渐变，带有透明度径向渐变：颜色结点均匀分布的径向渐变css3的圆角ra 查看详情

用css3实现带有阴影效果和颜色渐变的按钮

...用css3里的两个新属性box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片；本想直接在这个页面下嵌html的,,试了后发现有些css样式貌似不给用就只能放图片了...=_=)： ... 查看详情

带有 uiscrollview 分页的 iOS 渐变动画

】带有uiscrollview分页的iOS渐变动画【英文标题】：iOSgradientanimatingwithuiscrollviewpaging【发布时间】：2014-08-3016:45:19【问题描述】：我有一个3页的水平滚动视图。我想为每个页面设置一种不同的背景颜色，并在3种颜色之间绘制渐变... 查看详情

css3新特性（阴影动画渐变变形伪元素等）css3与页面布局学习总结——css3新特性（阴影动画渐变变形伪元素等）

目录一、阴影1.1、文字阴影1.2、盒子阴影二、背景2.1、背景图像尺寸2.2、背景图像显示的原点三、伪元素3.1、before3.2、after3.3、清除浮动四、圆角与边框4.1、border-radius圆角4.2、边框图片border-image五、变形transform5.1、rotate()2D旋转5.... 查看详情

css3新特性（阴影动画渐变变形伪元素等）css3与页面布局学习总结——css3新特性（阴影动画渐变变形伪元素等）

身体上设置的 CSS3 渐变背景不会拉伸而是重复？

】身体上设置的CSS3渐变背景不会拉伸而是重复？【英文标题】：CSS3gradientbackgroundsetonbodydoesn\'tstretchbutinsteadrepeats?【发布时间】：2011-02-2114:09:49【问题描述】：好吧，<body>里面的内容总高300px。如果我使用-webkit-gradient... 查看详情

css纯css3渐变背景动画(代码片段)

查看详情

css3文字颜色渐变动画

<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><title 查看详情

css3与页面布局学习总结——css3新特性（阴影动画渐变变形伪元素等）

CSS3在CSS2.1的基础上新增加了许多属性，这里选择了较常用的一些功能与大家分享，帮助文档中有很详细的描述，可以在本文的示例中获得帮助文档。一、阴影1.1、文字阴影text-shadow<length>①：第1个长度值用来设置对象的阴影... 查看详情

css3（六css3新特性（阴影动画渐变变形伪元素等）

一、阴影1.1、文字阴影1.2、盒子阴影二、背景2.1、背景图像尺寸2.2、背景图像显示的原点三、伪元素3.1、before3.2、after3.3、清除浮动四、圆角与边框4.1、border-radius圆角4.2、边框图片border-image五、变形transform5.1、rotate()2D旋转5.2、... 查看详情

css3中的渐变

虽说css3都已经使用多年了，但是关于css3的渐变用的很少。今天遇见了，就学习了一下。首先我们打开ps，新建一个画布，选择渐变工具，这个时候我们能够看到顶栏上面的渐变类型如下第一个我们选中的是线性渐变，第二个是... 查看详情

css3与页面布局学习总结——css3新特性（阴影动画渐变变形伪元素等）

css3渐变

线性渐变：属性：linear-gradinet(开始位置角度，起始颜色，终止颜色)开始位置：渐变开始的位置，属性值可以为百分比/长度/left、right、top、bottom（可组合使用）角度：渐变终止方向的角度，当开始位置为数值或百分比时候可用... 查看详情

带有 css3 过渡的角度淡入淡出动画

】带有css3过渡的角度淡入淡出动画【英文标题】：angularfadeanimationwithcss3transtions【发布时间】：2015-01-1714:58:33【问题描述】：我正在尝试使用ngAnimate和css3转换在单击链接时淡入/淡出div。我有以下内容，但它不起作用。div显示/隐... 查看详情

带有变换的 CSS3 动画会导致 Webkit 上的元素模糊

】带有变换的CSS3动画会导致Webkit上的元素模糊【英文标题】：CSS3animationswithtransformcausesblurredelementsonWebkit【发布时间】：2012-05-1204:07:27【问题描述】：所以我有一些原生元素(divs)应用了各种效果（border-radius、box-shadow和transform:sca... 查看详情

带有 AngularJS 的 CSS3 动画在 Firefox 中不能正确滑动

】带有AngularJS的CSS3动画在Firefox中不能正确滑动【英文标题】：CSS3AnimationwithAngularJSnotslidingcorrectlyinFirefox【发布时间】：2014-11-1521:03:43【问题描述】：我制作了一个连接到ng-repeat的CSS3动画，然后用Bootstrap3显示了一个inline-list，我... 查看详情