具有线性渐变的CSS过渡[重复]
Posted
技术标签:
【中文标题】具有线性渐变的CSS过渡[重复]【英文标题】:css transition with linear gradient [duplicate] 【发布时间】:2011-11-13 20:33:47 【问题描述】:我正在尝试向我拥有的按钮添加过渡效果,该按钮的背景是使用 css 线性渐变制作的,但它不起作用。
这是我的按钮的 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))
如果您想知道 @green 和 @greenhover,我正在使用 .less 来制作我的 css。
这有什么问题吗?有什么想法吗?
【问题讨论】:
我只是想提示my answer 因为你会发现所有答案都是指不透明度变化,这并不令人满意。希望你同意,你们都会发现它有帮助 【参考方案1】:很遗憾,你现在真的不能过渡渐变。
因此,唯一可行的解决方法是使用具有所需渐变和过渡的额外元素,它是不透明度:
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>
【讨论】:
这是过时的,psudo elements work fine 现在 这并不总是提供相同的结果。你可以use SVG 来进行真正的过渡 而不是 svg 解决方案我发现这非常令人满意check my solution【参考方案2】:您可以使用投影来伪造渐变过渡! 例如,从我的一个页面:
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;
接着是:
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);
在这里,您实际上是在使用嵌入阴影作为类似 Photoshop 的蒙版,从而在底层元素上产生渐变效果。悬停时,您会反转效果。
【讨论】:
除非是非常小的过渡,否则它的性能非常糟糕【参考方案3】:如果您在悬停按钮时略微突出显示,则有一个更简单的解决方案。您可以将渐变向下微调一点,让背景颜色与渐变的顶部颜色相同:http://cdpn.io/oaByI
我知道它非常有限,但如果适用于该用例。
【讨论】:
【参考方案4】:您必须在源中具有相同的样式并在目标中更改样式。
喜欢
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);
【讨论】:
【参考方案5】:我知道这个问题已经很老了,但我找到了一种在某些情况下可以为基本渐变设置动画的好方法。
此方法将让您对渐变颜色的变化进行动画处理,但不会更改色标的位置。
https://jsfiddle.net/62vzydeh/
html:
<div class="button">
Click Me!
</div>
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;
【讨论】:
【参考方案6】:我知道这已经很老了,但我还没有找到任何好的解决方案。所以这是我的解决方案
首先在 ":before 上制作渐变并用不透明度隐藏它,然后在悬停时过渡不透明度 1。
https://jsfiddle.net/sumon380/osqLpboc/3/
.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;
<a class="button" href="#">Button</a>
【讨论】:
最佳答案在这里!【参考方案7】:这很棘手.. 当然,棘手很酷;)
好的..我有一个解决方案。它基本上是通过惊人的: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>
注意:我刚刚添加了
:after
sudo 类,只是为了顶部图像占位符的小目的..
有一个很棒的造型;)
【讨论】:
【参考方案8】:我尝试的一种 hacky 方法是使用大量 <spans>
来复制“位置”,CSS 仅在此处破解:https://codepen.io/philipphilip/pen/OvXEaV
【讨论】:
【参考方案9】:9 年,但这次,希望我的 styled-components
可以帮助某人:
import React, ReactNode from 'react'
import Button as ButtonUI from "@your-library-ui"
import styled from 'styled-components'
type Props =
onClick?: () => void;
children?: ReactNode;
;
const Button = (onClick, children: Props) => (
<StyledButton onClick=onClick >
children
<ButtonHelper />
</StyledButton>
)
export default Button
const ButtonHelper = styled.span`
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 5px;
background: linear-gradient(to right, #5ab0f4, #1273ea)!important;
transition: opacity 0.2s linear;
`;
const StyledButton = styled(ButtonUI)`
position: relative;
z-index: 1;
background: linear-gradient(to right, #1273ea, #1c94f4)!important;
color: #fff;
&:hover $ButtonHelper
opacity: 1;
`;
并开始使用您新设计的具有额外效果的组件!感谢@kizu 的建议。
【讨论】:
以上是关于具有线性渐变的CSS过渡[重复]的主要内容,如果未能解决你的问题,请参考以下文章