Html 在悬停事件上为 CSS 渐变背景设置动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14116689/
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
Animating a CSS gradient background on the hover event
提问by James Dawson
I have some menu items that are styled using a background gradient on hover using the following styling:
我有一些菜单项使用以下样式在悬停时使用背景渐变进行样式设置：
#sidebar ul li a:hover {
background-image: linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
background-image: -o-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
background-image: -moz-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
background-image: -ms-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.05, rgb(68,68,68)),
color-stop(1, rgb(51,51,51))
);
color: #f0f0f0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
My question is, is it possible to make the new background (defined by gradients) slide in from the right using CSS3 transitions or animations? Or will I have to resort to using a sprite image or Javascript?
我的问题是，是否可以使用 CSS3 过渡或动画使新背景（由渐变定义）从右侧滑入？或者我将不得不求助于使用精灵图像或 Javascript？
回答by Cdeez
Animation on gradients aren't supported yet. However this site provides a pleasing approach for a animated kind of feel on hover-
尚不支持渐变动画。然而，这个网站提供了一种令人愉悦的方法，可以在悬停时获得一种动画的感觉——
http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
Sample css:-
示例CSS：-
#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;
}
回答by 3dgoo
It seems gradients don't support transitions yet (still):
似乎渐变还不支持过渡（仍然）：
Use CSS3 transitions with gradient backgrounds
If you use a background image rather than a css3 gradient, then you can use css transition to animate it in and out.
如果您使用背景图像而不是 css3 渐变，那么您可以使用 css 过渡来动画它进出。
回答by agrublev
Try this as a hack:
试试这个作为一个黑客：
<div class="background-animate">
<div class="content">Hi im content</div>
</div>
And style it
并设计它
.background-animate {
position: relative;
z-index: 10;
display: block;
background: transparent;
}
.background-animate:before {
content: "";
position: absolute;
transition: opacity .35s ease-in-out;
-moz-transition: opacity .35s ease-in-out;
-webkit-transition: opacity .35s ease-in-out;
top:0; left: 0; right: 0; bottom: 0; z-index:-1;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 40%, #e9eae9 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 40%,#e9eae9 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 40%,#e9eae9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.background-animate:hover:before {
opacity: 0;
}
.background-animate:after {
content: ""; opacity: 0;
transition: opacity .35s ease-in-out;
-moz-transition: opacity .35s ease-in-out;
-webkit-transition: opacity .35s ease-in-out;
position: absolute;
top:0; left: 0; right: 0; bottom: 0; z-index:-1;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 80%, #e9eae9 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 80%,#e9eae9 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 80%,#e9eae9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.background-animate:hover:after {
opacity: 1;
}
It basically does an opacity switch between to gradients. Demo found here https://codepen.io/anon/pen/eWOEoR
它基本上在渐变之间进行不透明度切换。演示在这里找到https://codepen.io/anon/pen/eWOEoR
