特效弹出层提示php,jquery制作漂亮的弹出层提示消息特效

今天给大家带来一款基于jquery超炫的弹出层提示消息。这款实例页面初始时，一个go按钮。当单击go按钮时，提示强出层以动画形式出现。效果图如下：

实现的代码。

html代码：

GO

✔

Success

Check your email for a booking confirmation. We'll see you soon!

OK

$('#go').click(function () {

go(50);

});

$('#ok').click(function () {

go(500);

});

setTimeout(function () {

go(50);

}, 700);

setTimeout(function () {

go(500);

}, 2000);

function go(nr) {

$('.bb').fadeToggle(200);

$('.message').toggleClass('comein');

$('.check').toggleClass('scaledown');

$('#go').fadeToggle(nr);

}

//@ sourceURL=pen.js

css代码：

body, html

{

height: 100%;

font-size: 20px;

font-family: Source Sans Pro;

}

.b, .bb

{

position: absolute;

width: 100%;

height: 100%;

background: url("kje4L5j.jpg");

background-attachment: fixed;

background-size: cover;

background-position: center;

}

.bb

{

background: url("bDBs0et.jpg");

background-attachment: fixed;

background-size: cover;

background-position: center;

display: none;

}

#go

{

position: absolute;

top: 30px;

left: 50%;

transform: translate(-50%, 0%);

color: white;

border: 0;

background: #71c341;

width: 100px;

height: 30px;

border-radius: 6px;

font-size: 1rem;

transition: background 0.2s ease;

outline: none;

}

#go:hover

{

background: #8ecf68;

}

#go:active

{

background: #5a9f32;

}

.message

{

position: absolute;

top: -200px;

left: 50%;

transform: translate(-50%, 0%);

width: 300px;

background: white;

border-radius: 8px;

padding: 30px;

text-align: center;

font-weight: 300;

color: #2c2928;

opacity: 0;

transition: top 0.3s cubic-bezier(0.31, 0.25, 0.5, 1.5), opacity 0.2s ease-in-out;

}

.message .check

{

position: absolute;

top: 0;

left: 50%;

transform: translate(-50%, -50%) scale(4);

width: 120px;

height: 110px;

background: #71c341;

color: white;

font-size: 3.8rem;

padding-top: 10px;

border-radius: 50%;

opacity: 0;

transition: transform 0.2s 0.25s cubic-bezier(0.31, 0.25, 0.5, 1.5), opacity 0.1s 0.25s ease-in-out;

}

.message .scaledown

{

transform: translate(-50%, -50%) scale(1);

opacity: 1;

}

.message p

{

font-size: 1.1rem;

margin: 25px 0px;

padding: 0;

}

.message p:nth-child(2)

{

font-size: 2.3rem;

margin: 40px 0px 0px 0px;

}

.message #ok

{

position: relative;

color: white;

border: 0;

background: #71c341;

width: 100%;

height: 50px;

border-radius: 6px;

font-size: 1.2rem;

transition: background 0.2s ease;

outline: none;

}

.message #ok:hover

{

background: #8ecf68;

}

.message #ok:active

{

background: #5a9f32;

}

.comein

{

top: 150px;

opacity: 1;

}

以上就是基于jQuery制作的漂亮的弹出层提示特效的全部代码了，非常的漂亮吧，小伙伴们可以直接使用到自己的项目中去。