css3 - 使用渐变背景的CSS3过渡

  显示原文与译文双语对照的内容
0 0

我正试图在缩略图上使用css进行切换,这样在悬停时,背景渐变淡入。 转换工作不正常,但是如果我只是将它更改为 rgba() 值,它就可以正常工作。 不支持渐变我尝试使用图像,它将不会转换图像。

我知道这是有可能的,因为在另一个帖子中有人这么做了,但我不知道到底如何。 任何帮助> 都是一些使用的CSS:


#container div a {
 -webkit-transition: background 0.2s linear;
 -moz-transition: background 0.2s linear;
 -o-transition: background 0.2s linear;
 transition: background 0.2s linear;
 position:absolute;
 width:200px;
 height:150px;border: 1px #000 solid;
 margin:30px;z-index:2
}
#container div a:hover {
 background:-webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0,0,0,.7)), to(rgba(0,0,0,.4)))
}

时间: 原作者:

0 0

渐变不支持转换,( 虽然规范说明他们应该) 。

如果你想要具有背景渐变的fade-in效果,

你必须在容器元素上设置一个的不透明度,并且'transition`不透明度。

( 我想看到另一个帖子,你说它已经完成了。)

更新: IE10+ now supports gradient transitions

原作者:
0 0

一个work-around是转换背景位置,以产生渐变的效果: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

带background-position的CSS3渐变过渡

尽管你不能使用CSS转换属性直接设置渐变的动画,但可以通过动画设置background-position属性来实现简单的渐变动画:

这里代码的代码非常简单:


#DemoGradient{ 
 background: -webkit-linear-gradient(#C7D3DC,#5B798E); 
 background: -moz-linear-gradient(#C7D3DC,#5B798E); 
 background: -o-linear-gradient(#C7D3DC,#5B798E); 
 background: linear-gradient(#C7D3DC,#5B798E); 

 -webkit-transition: background 1s ease-out; 
 -moz-transition: background 1s ease-out; 
 -o-transition: background 1s ease-out; 
 transition: background 1s ease-out; 

 background-size:1px 200px; 
 border-radius: 10px; 
 border: 1px solid #839DB0; 
 cursor:pointer; 
 width: 150px; 
 height: 100px; 
} 
#DemoGradient:Hover{ 
 background-position:100px; 
} 



HTML:

<div id="DemoGradient"></div> 

原作者:
0 0

一个解决方案是使用 background-position来模拟渐变过渡。 这里解决方案在 Twitter Bootstrap 中使用了几个月。

更新

http://codersblock.blogspot.fr/2013/12/gradient-animation-trick.html?showComment=1390287622614

下面是一个快速示例:

链接状态


. btn {
 font-family:"Helvetica Neue", Arial, sans-serif;
 font-size: 12px;
 font-weight: 300;
 position: relative;
 display: inline-block;
 text-decoration: none;
 color: #fff;
 padding: 20px 40px;
 background-image: -moz-linear-gradient(top, #50abdf, #1f78aa);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#50abdf), to(#1f78aa));
 background-image: -webkit-linear-gradient(top, #50abdf, #1f78aa);
 background-image: -o-linear-gradient(top, #50abdf, #1f78aa);
 background-image: linear-gradient(to bottom, #50abdf, #1f78aa);
 background-repeat: repeat-x;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff50abdf', endColorstr='#ff1f78aa', GradientType=0);
 background-repeat: repeat-y;
 background-size: 100% 90px;
 background-position: 0 -30px;
 -webkit-transition: all 0.2s linear;
 -moz-transition: all 0.2s linear;
 -o-transition: all 0.2s linear;
 transition: all 0.2s linear;
}

悬停状态


.btn:hover {
 background-position: 0 0;
}

0 0

在下面,锚标记有一个子标记和一个孙子。 孙具有远背景渐变。 在近背景中的子对象是透明的,但具有渐变到。 悬停时,子对象的不透明度从 0到 1过渡,在 1秒之间。

下面是 CSS:


.bkgrndfar {
 position:absolute;
 top:0;
 left:0;
 z-index:-2;
 height:100%;
 width:100%;
 background:linear-gradient(#eee, #aaa);
}

.bkgrndnear {
 position:absolute;
 top:0;
 left:0;
 height:100%;
 width:100%;
 background:radial-gradient(at 50% 50%, blue 1%, aqua 100%);
 opacity:0;
 transition: opacity 1s;
}

a.menulnk {
 position:relative;
 text-decoration:none;
 color:#333;
 padding: 0 20px;
 text-align:center;
 line-height:27px;
 float:left;
}

a.menulnk:hover {
 color:#eee;
 text-decoration:underline;
}

/* This transitions child opacity on parent hover */
a.menulnk:hover. bkgrndnear {
 opacity:1;
}

还有,这是 HTML:


<a href="#" class="menulnk">Transgradient
<div class="bkgrndfar">
 <div class="bkgrndnear">
 </div>
</div>
</a>

上仅在最新版本的Chrome 中测试。 以下是悬停前的on-hover和完全转换的on-hover图像:

BeforeHalfwayAfter

0 0

你可以使用一些叠加渐变的不透明度来模拟渐变之间的过渡,如下面的几个答案所示:

带有渐变, CSS3 animation.

你也可以转换位置,如下所述:

CSS3渐变过渡与 background-position

这里还有一些技巧:

渐变的动画。

原作者:
0 0

尝试使用:之前和之后( IE9+ )


#wrapper{
 width:400px;
 height:400px;
 margin:0 auto;
 border: 1px #000 solid;
 position:relative;}
#wrapper:after,
#wrapper:before{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 content:'';
 background: #1e5799;
 background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
 background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
 background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
 background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
 background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
 opacity:1;
 z-index:-1;
 -webkit-transition: all 2s ease-out;
 -moz-transition: all 2s ease-out;
 -ms-transition: all 2s ease-out;
 -o-transition: all 2s ease-out;
 transition: all 2s ease-out;
}
#wrapper:after{
 opacity:0;
 background: #87e0fd;
 background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));
 background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
 background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
 background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
 background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
}
#wrapper:hover:before{opacity:0;}
#wrapper:hover:after{opacity:1;}

原作者:
0 0

如上所述。CSS过渡目前不支持渐变。 但你可以变通解决它在某些情况下通过的某种颜色设置为透明,这样,其他一些包装元素的background-color和产品化,与其照进来。

原作者:
0 0

渐变过渡的部分变通方法是使用内嵌框阴影- 可以转换框阴影本身,也可以转换背景颜色- 比如 如果你创建的是背景颜色,而不是背景颜色,则会造成背景渐变为径向渐变


.button SPAN {
 padding: 10px 30px; 
 border: 1px solid ##009CC5;

 -moz-box-shadow: inset 0 0 20px 1px #00a7d1;
 -webkit-box-shadow: inset 0 0 20px 1px#00a7d1;
 box-shadow: inset 0 0 20px 1px #00a7d1; 

 background-color: #00a7d1;
 -webkit-transition: background-color 0.5s linear;
 -moz-transition: background-color 0.5s linear;
 -o-transition: background-color 0.5s linear;
 transition: background-color 0.5s linear;
}

.button SPAN:hover {
 background-color: #00c5f7; 
}

0 0

我在工作中使用这里方法:IE6+ https://gist.github.com/GrzegorzPerko/7183390

不要忘记 <element class="ahover"><span>Text</span></a> 如果使用文本元素。


.ahover {
 display: block;
/** text-indent: -999em; ** if u use only only img **/
 position: relative;
}
.ahover:after {
 content:"";
 height: 100%;
 left: 0;
 opacity: 0;
 position: absolute;
 top: 0;
 transition: all 0.5s ease 0s;
 width: 100%;
 z-index: 1;
}
.ahover:hover:after {
 opacity: 1;
}
.ahover span {
 display: block;
 position: relative;
 z-index: 2;
}

原作者:
0 0

在某一渐变到另一个通过利用 codepen,它修改上找到了一个不错的hack fade. opacity 同时将它的实现了, 他所做的是设置一个 :after,这样当你改变了实际元素的不透明度时,:after 元素就会显示出来,看起来像是一个淡入淡出。 我觉得共享它很有用。

原始 codepen: http://codepen.io/sashtown/pen/DfdHh


.button {
 display: inline-block;
 margin-top: 10%;
 padding: 1em 2em;
 font-size: 2em;
 color: #fff;
 font-family: arial, sans-serif;
 text-decoration: none;
 border-radius: 0.3em;
 position: relative;
 background-color: #ccc;
 background-image: linear-gradient(to top, #6d8aa0, #8ba2b4);
 -webkit-backface-visibility: hidden;
 z-index: 1;
}
.button:after {
 position: absolute;
 content: '';
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-radius: 0.3em;
 background-image: linear-gradient(to top, #ca5f5e, #d68584);
 transition: opacity 0.5s ease-out;
 z-index: 2;
 opacity: 0;
}
.button:hover:after {
 opacity: 1;
}
.button span {
 position: relative;
 z-index: 3;
}
body {
 text-align: center;
 background: #ddd;
}
<a class="button" href="#"><span>BUTTON</span></a>
原作者:
...