CSS 具有线性渐变的css过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7363141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css transition with linear gradient
提问by Johan Alkst?l
I'm trying to add a transition to a button I have that's background is made with css linear-gradient but it's not working.
我正在尝试向一个按钮添加一个过渡，我的背景是用 css linear-gradient 制作的，但它不起作用。
This is the css for my button.
这是我的按钮的 css。
a.button
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@green), color-stop(100%,#a5c956));
-webkit-transition: background 5s linear;
}
a.button:hover
{
-webkit-gradient(linear, left top, left bottom, color-stop(0%,@greenhover), color-stop(100%,#89af37))
}
If you're wondering about @green and @greenhover, I'm using .less to make my css.
如果您对@green 和@greenhover 感到疑惑，我正在使用 .less 来制作我的 css。
Anything wrong with this? Any ideas?
这有什么问题吗？有任何想法吗？
回答by kizu
Sadly, you really can't transition gradients for now.
可悲的是，你现在真的不能过渡渐变。
So, the only workable workaround is using an extra element with needed gradient and transition it's opacity:
因此，唯一可行的解决方法是使用具有所需渐变和过渡不透明度的额外元素：
a.button {
position: relative;
z-index: 9;
display: inline-block;
padding: 0 10px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(green), to(#a5c956));
background: -webkit-linear-gradient(top, green, #a5c956);
background: -moz-linear-gradient(top, green, #a5c956);
background: -o-linear-gradient(top, green, #a5c956);
background: linear-gradient(top, green, #a5c956);
}
.button-helper {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: -webkit-gradient(linear, 0 0, 0 100%, from(lime), to(#89af37));
background: -webkit-linear-gradient(top, lime, #89af37);
background: -moz-linear-gradient(top, lime, #89af37);
background: -o-linear-gradient(top, lime, #89af37);
background: linear-gradient(top, lime, #89af37);
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
}
a.button:hover .button-helper {
opacity: 1;
}<a href="#" class="button"><span class="button-helper"></span>button</a>回答by Biskrem Muhammad
it's tricky.. and of course tricky is cool ;)
这很棘手..当然棘手很酷;)
okay.. i got a solution. and it's basically done via amazing :beforeselector
好吧..我有一个解决方案。它基本上是通过惊人的:before选择器完成的
#cool-hover{
width: 120px;
height: 120px;
display: block;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
margin: 0px auto 24px auto;
transition: all 0.5s;
position: relative;
overflow: hidden;
}
#cool-hover:before{
border-radius: inherit;
display: block;
width: 200%;
height: 200%;
content: '';
position: absolute;
top: 0;
left: 0;
background: linear-gradient(135deg, #21d4fd 25%, #b721ff 75%);
transition: all 0.5s;
transform: translate(-25%, -25%);
z-index: 0;
}
#cool-hover:after{
border-radius: 9px;
display: block;
width: 108px;
height: 108px;
margin: 6px;
background: url('https://i.imgur.com/w0BjFgr.png');
background-size: cover;
content: '';
position: absolute;
top: 0; left: 0;
z-index: 1;
}
#cool-hover:hover:before{
transform: translate(-25%, -25%) rotate(-180deg);
}
#cool-hover:hover{
box-shadow: 0 0 35px rgba(0,0,0,0.3);
}<div id="cool-hover"></div>NOTE: i just added the
:aftersudo class just for the small on top image placeholder purpose..
注意：我刚刚添加了
:aftersudo 类只是为了顶部图像占位符的目的..
have a nice awesome styling ;)
有一个很棒的造型;)
回答by Mark Choi
You can fake gradient transitions using drop shadows! For instance, from one of my pages:
您可以使用投影来伪造渐变过渡！例如，从我的页面之一：
c {
color: #FFF;
background: #000;
border-style:solid;
border-color:#CCC;
border-width: 0 0 0 1px;
box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-o-box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 2px 2px 2px #555,
inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-moz-transition: background-color .5s ease;
-o-transition: background-color .5s ease;
-webkit-transition: background-color .5s ease-in-out;
transition: background-color .5s ease;
}
Followed by:
其次是：
c:hover {
color:#FFF;
background: #505;
position:relative;
top:1px;
box-shadow: -1px -1px -1px #555,inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-moz-box-shadow: -1px -1px -1px #555,inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-o-box-shadow: -1px -1px -1px #555, inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-webkit-box-shadow: 1px -1px -1px #555, inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
}
Here, you are essentially using an inset shadow as a Photoshop-like mask, causing a gradient effect on the underlying element. On hover, you invert the effect.
在这里，您实际上是将插入阴影用作类似 Photoshop 的蒙版，从而在底层元素上产生渐变效果。在悬停时，您反转效果。
回答by Hampus Ahlgren
If you're doing the slight highlight when hovering the button there is a much simpler solution. You can just nudge the gradient down a bit and have the background-color be the same as the top color of your gradient: http://cdpn.io/oaByI
如果您在悬停按钮时进行轻微突出显示，则有一个更简单的解决方案。您可以将渐变稍微向下轻推，并使背景颜色与渐变的顶部颜色相同：http: //cdpn.io/oaByI
It's pretty limited I know, but if works well for that use case.
我知道它非常有限，但如果适用于该用例。
回答by Gogeta70
I know this question is pretty old, but I found a good way to animate basic gradients that will work in some cases.
我知道这个问题已经很老了，但是我找到了一种在某些情况下可以为基本渐变设置动画的好方法。
This method will let you animate a change in color of the gradient but not a change in the position of the color stops.
此方法将让您对渐变颜色的变化进行动画处理，但不会对颜色停止位置的变化进行动画处理。
https://jsfiddle.net/62vzydeh/
https://jsfiddle.net/62vzydeh/
HTML:
HTML：
<div class="button">
Click Me!
</div>
CSS:
CSS：
.button {
width: 200px;
height: 30px;
margin: 50px;
padding-top: 10px;
color: #C0C0C0;
background: linear-gradient(to left, #F8F8F8, transparent 30%);
background-color: #808080;
text-align: center;
font-family: sans-serif;
cursor: pointer;
transition: background-color 500ms;
}
.button:hover {
background-color: #A0A0A0;
}
回答by user2462948
I know this pretty old but I could not find any good solution yet. So here I made good solution for this.
我知道这很旧，但我还找不到任何好的解决方案。所以在这里我为此做了很好的解决方案。
First Make gradient on ":before and hide it with opacity then transition opacity 1 on hover.
首先在 ":before 上制作渐变并用不透明度隐藏它，然后在悬停时过渡不透明度 1。
https://jsfiddle.net/sumon380/osqLpboc/3/
https://jsfiddle.net/sumon380/osqLpboc/3/
HTML:
HTML：
<a href="#" class="button">Button</a>
CSS:
CSS：
.button {
text-decoration: none;
padding: 10px 25px;
font-size: 20px;
color: #333;
display: inline-block;
background: #d6e9eb;
position: relative;
z-index: 1;
transition: color 0.3s ease-out;
}
.button:before {
background: #91a5f4;
background: linear-gradient(135deg, #91a5f4 0%, #b08cf9 86%);
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease-out;
}
.button:hover:before {
opacity: 1;
}
.button:hover {
color: #fff;
}
回答by philip
a hacky way i tried was putting lots of <spans>to replicate "position", CSS only hack here: https://codepen.io/philipphilip/pen/OvXEaV
我尝试过的一种hacky方法是放很多<spans>复制“位置”，CSS只在这里hack：https: //codepen.io/philipphilip/pen/OvXEaV
回答by Omid Moridi
you must have same style in source and changed style in target.
您必须在源中具有相同的样式并在目标中具有更改的样式。
like
喜欢
a {
background: transparent;
background: linear-gradient(transparent,transparent);
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a:hover
{
background: #abc07c;
background: linear-gradient(#c5db95,#88a743);
}