本网站只能被运行在支持JavaScript脚本的环境中

使用CSS 3+jQuery制作渐变hover特效

在Windows 8系统中,当鼠标指针移动到任务栏中的图标上时,该图标会以动画方式显示一个渐变特效。本文介绍如何在网页上制作这种动画特效。

示例运行结果

HTML代码

 <ul>
    <li><a href=""#>HOME</a></li>
    <li><a href=""#>LIST</a></li>
    <li><a href=""#>PRODUCT</a></li>
    <li><a href=""#>ABOUT</a></li>
    <li><a href=""#>CONTACT</a></li>
</ul>

CSS样式代码

ul{
    width: 700px;
    margin: 0 auto;
}
ul li{
    width: 120px;
    height: 60px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    list-style: none;
    margin: 10px;
    text-align: center;
    float: left;
}
ul li a{
    display: block;
    width: 118px;
    height: 58px;
    background: #ff4705;
    border-radius: 8px;
    border: solid 1px #ff6405;
    line-height: 60px;
    text-decoration: none;
    color: #fff;
}

jQuery代码

$(function(){ 
    //调用gradientBox函数,并设置需要使用动画特效的元素选择器
    gradientBox("ul li a");  
    function gradientBox(target){
        var target = $(target); 
        target.on("mousemove touchmove", function(e){    //当鼠标指针移动到元素上时执行下述代码 
            var startClr = "#ffb76b";     //渐变开始色
            var middleClr = "#ff6405";    //渐变中途色
            var endClr = "#ff4705";      //渐变终点色
 
            //获取元素尺寸
            var boxWidth = $(this).width();
            var boxHeight = $(this).height();
 
            //获取鼠标指针或手指坐标
            var mx = e.clientX - $(this).offset().left;
            var my = e.clientY - $(this).offset().top;
 
            //将数值坐标转换为百分比坐标
            var prx = (mx / boxWidth) * 100;
            var pry = (my / boxHeight) * 100;
 
            //根据各种浏览器指定不同的渐变设置方法
            var ua = navigator.userAgent.toLowerCase();
            if(ua.indexOf("safari") != -1 || ua.indexOf("chrome") != -1 || ua.indexOf("ipad") != -1 || ua.indexOf("ipod") != -1 || ua.indexOf("iphone") != -1 || ua.indexOf("android") != -1){
 
                //使用CSS指定渐变
                $(this).css({
                    "background" : "-webkit-radial-gradient(" + prx + "% " + pry + "%, ellipse farthest-side, " + startClr + " 0%, " + middleClr + " 60%, " + endClr + " 100%)"
                });
            }else if(ua.indexOf("firefox")){
                $(this).css({
                    "background" : "-moz-radial-gradient(" + prx + "% " + pry + "%, ellipse farthest-side, " + startClr + " 0%, " + middleClr + " 60%, " + endClr + " 100%)"
                });
            }else{
                $(this).css({
                    "background" : "radial-gradient(" + prx + "% " + pry + "%, ellipse farthest-side, " + startClr + " 0%, " + middleClr + " 60%, " + endClr + " 100%)"
                });
            } 
        }).on("mouseout touchout", function(){    //当鼠标指针或手指离开元素时执行以下代码
            $(this).css("background", "#ff4705");
        });
    } 
});

关键代码为:获取元素上的鼠标指针坐标,然后将数值坐标转换为百分比坐标。同时在元素的背景中绘制以鼠标指针所在位置为中心点向外绘制放射状渐变。绘制方法为:

background:radial-gradient([中心点位置的水平坐标(百分比单位)] [中心点位置的垂直坐标(百分比单位)],形状与尺寸,开始色 位置,中途色 位置,终点色 位置);

由于在各浏览器中渐变色的指定方法各不相同,所以要分别指定。