列表按钮特效

Html

Css


    开 始 游 戏
    荣 耀 榜
    游 戏 奖 励
    奖品展示区

.btn div {
	font-size:18px;
	color:#000;
	text-align:center;
	line-height:45px;
	border-radius:3px;
	position:absolute;
	width:40%;
	height:45px;
	left:30%;
	font-weight:300;
	background:rgb(175,238,238);
}

setTimeout(function() {
    $("#btn1").animate({
        opacity: "0.7"
    }, 1000);
}, 400)
setTimeout(function() {
    $("#btn2").animate({
        opacity: "0.7"
    }, 1000);
}, 700)
setTimeout(function() {
    $("#btn3").animate({
        opacity: "0.7"
    }, 1000);
}, 1000)
setTimeout(function() {
    $("#btn4").animate({
        opacity: "0.7"
    }, 1000);
}, 1300)
$("#btn1").click(function() {
    setTimeout(function() {
        $("#btn1").animate({
            top: "0%",
            left: "0%",
            width: "100%",
            height: "100%",
            opacity: "0",
            fontSize: "80px",
            lineHeight: "600px"
        }, 500, function() {
            window.location.href = '#';
        });
    }, 600)

$("#btn2").animate({
        left: "60%",
        opacity: "0"
    });
    $("#btn3").animate({
        left: "60%",
        opacity: "0"
    });
    $("#btn4").animate({
        left: "60%",
        opacity: "0"
    });

});

$("#btn2").click(function() {
    setTimeout(function() {
        $("#btn2").animate({
            top: "0%",
            left: "0%",
            width: "100%",
            height: "100%",
            opacity: "0",
            fontSize: "80px",
            lineHeight: "600px"
        }, 500, function() {
            window.location.href = '#';
        });

}, 600)
    $("#btn1").animate({
        left: "60%",
        opacity: "0"
    });
    $("#btn3").animate({
        left: "60%",
        opacity: "0"
    });
    $("#btn4").animate({
        left: "60%",
        opacity: "0"
    });
});

$("#btn3").click(function() {
    setTimeout(function() {
        $("#btn3").animate({
            top: "0%",
            left: "0%",
            width: "100%",
            height: "100%",
            opacity: "0",
            fontSize: "80px",
            lineHeight: "600px"
        }, 500, function() {
            window.location.href = '#';
        });

}, 600)
    $("#btn2").animate({
        left: "60%",
        opacity: "0"
    });
    $("#btn1").animate({
        left: "60%",
        opacity: "0"
    });
    $("#btn4").animate({
        left: "60%",
        opacity: "0"
    });
});

$("#btn4").click(function() {
    setTimeout(function() {
        $("#btn4").animate({
            top: "0%",
            left: "0%",
            width: "100%",
            height: "100%",
            opacity: "0",
            fontSize: "80px",
            lineHeight: "600px"
        }, 500, function() {
            window.location.href = '#';
        });

}, 600)
    $("#btn2").animate({
        left: "60%",
        opacity: "0"
    });
    $("#btn3").animate({
        left: "60%",
        opacity: "0"
    });
    $("#btn1").animate({
        left: "60%",
        opacity: "0"
    });
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

列表按钮特效



代码描述：打开页面按钮淡入效果，点击按钮特效

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

电商部叶晓圳

相关代码

列表按钮特效

最新