我有一些菜单项在悬停时使用背景渐变来设置样式,使用以下样式:
#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;
}
我的问题是,是否可以使用 CSS3 过渡或动画使新背景(由渐变定义)从右侧滑入?还是我必须求助于使用 sprite 图像或 Javascript?
最佳答案
尚不支持渐变动画。然而,这个站点提供了一种令人愉悦的方法,可以在悬停时产生一种动画感觉-
http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
示例 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;
}
关于html - 在悬停事件上动画 CSS 渐变背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14116689/