在悬停事件上为CSS渐变背景设置动画 [英] Animating a CSS gradient background on the hover event

查看:139
本文介绍了在悬停事件上为CSS渐变背景设置动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一些菜单项,使用下列样式在悬停时使用背景渐变设置样式:

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;
}



)使用CSS3过渡或动画从右侧滑入?

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?

推荐答案

目前还不支持渐变动画。但是,这个网站提供了一个令人愉快的方式,在悬停动画的感觉 -

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/

示例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;  
} 

这篇关于在悬停事件上为CSS渐变背景设置动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆