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

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

实现的代码。

超文本标记语言代码：

复制代码代码如下： div class=' b '/div class=' bb '/div button id=' GO ' GO/button div class=' message ' div class=' Check '/div p成功/p p p检查您的电子邮件以获得预订确认。我们很快就会见到你！/p按钮id=' OK ' OK/按钮/div脚本src=' jquery。js /脚本脚本$('#go ').click(function(){ go(50)；});$('#ok ').click(function(){ go(500)；});setTimeout(function(){ go(50)；}, 700);setTimeout(function(){ go(500)；}, 2000);函数go(nr) { $(' .bb ').渐变切换(200)；$('.消息')。切换类(“进来”)；$('.检查')。切换类(“缩小”)；$('#go ').渐变切换；} //@ sourceURL=pen.js /script

钢性铸铁代码：

复制代码代码如下：正文，html { height : 100%；font-size : 20px字体系列：来源Sans Pro}。b ,bb {位置：绝对值；宽度： 100%;高度： 100%;背景： URL(' kje4l 5j。jpg’)；背景-附件：固定；背景尺寸：封面；背景-位置：中心；} .bb {后台： URL(' bdbs0et。jpg’)；背景-附件：固定；背景尺寸：封面；背景-位置：中心；显示器：无；} # go { position : absolutetop : 30px左侧： 50%;transform: translate(-50%，0%)；颜色：白色；边框： 0；背景技术# 71c341宽度： 100像素；高度： 30pxborder-半径： 6pxfont-size : 1 rem过渡：背景0.2s轻松；大纲：无；} # go :悬停{后台： # 8ec f68} # go :激活{后台： # 5a 9f 32} .消息{ position : absolute top :-200 px；左侧： 50%;transform: translate(-50%，0%)；宽度： 300像素；背景：白色；边界半径： 8pxpadding: 30px文本对齐：中心；字体粗细： 300；color : # 2c 2928 opa city 3360 0；过渡：顶级0.3s三次贝塞尔曲线(0.31,0.25,0.5,1.5),不透明度0.2s缓和出；} .消息。检查{位置：绝对值；top : 0；左侧： 50%;transform: translate(-50%，-50%)比例尺(4);宽度： 120像素；高度： 110px背景技术# 71c341color:白色；font-size : 3.8 rem衬垫-top : 10px；边界半径： 50%;opa城市3360 0；过渡：变换0.2s 0.25s三次贝塞尔曲线(0.31,0.25,0.5,1.5),不透明度0.1s 0.25s缓和缓和；} .消息。缩小{ transform: translate(-50%，-50%)比例(1);opa城市3360 1；} .消息p { font-size : 1.1 remmargin: 25px 0pxpadd : 0} .消息p : th-child(2){ font-size : 2.3 rem；margin: 40px 0px 0px 0px}。消息# ok { position : relative ecolor :白色；边框： 0；背景技术# 71c341宽度： 100%;高度： 50px边界半径： 6pxfont-size : 1.2 rem过渡：背景0.2s轻松；大纲：无；} .消息# ok :悬停{后台： # 8ec f68} .消息# ok :激活{后台： # 5a 9f 32} .come in { top : 150 pxopa city 3360 1；}

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