html div 显示动画效果,66种基于animate.css的CSS消息提示动画效果

这是一款基于animate.css的效果非常酷的CSS消息提示动画效果。这66种CSS消息提示动画效果按出现位置分为4种类型：上部、中部、中下和右下。每个部位的消息提示效果都是不一样的。

注意：这个CSS消息提示动画效果需要在支持CSS3的浏览器中才能正常工作。

HTML结构

该CSS消息提示动画效果的HTML结构非常简单。使用一个id为#notifications的div作为整个包裹容器。

消息提示框的代码默认情况下是不存在与DOM中的，它们使用js来动态插入。例如当选择"Top"选项时，在点击触发按钮后，Top消息提示框将使用js插入到DOM中：

Oups something went wrong !

对于中部、中下和右下几个部位的消息提示框也是相同的操作。它们默认是不存在与DOM中的，只有在触发了相应的事件时，才使用jQuery来将HTML代码插入到DOM中的相应位置上。

...

delmarks sent you a message

...

delmarks sent you a message

...

CSS样式

该CSS消息提示动画效果有两个主要的CSS文件。一个是animate.css文件，用于产生各种动画效果。另一个是animated-notifications.css文件。在实际使用时，你需要在animate.css文件中查找你需要的class动画名称。下面是主要的消息提示框定位CSS代码:

#notifications-bottom-right {

position: absolute;

width: 360px;

right: 20px;

bottom: 20px;

}

#notifications-bottom-right-tab{

background-color: rgba(255,255,255,1);

float: left;

height: 100px;

width: 360px;

margin-top: 20px;

position: relative;

-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.1);

-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.1);

box-shadow: 0px 0px 10px rgba(0,0,0,0.1);

}

#notifications-bottom-right-tab-close{

height: 20px;

width: 20px;

position: absolute;

top: 40px;

right: 20px;

color: #cccccc;

font-size: 18px;

line-height: 20px;

text-align: center;

-webkit-transition: all 0.5s;

-moz-transition: all 0.5s;

-o-transition: all 0.5s;

transition: all 0.5s;

}

#notifications-bottom-right-tab-close:hover {

color: rgba(102,102,102,1);

cursor: pointer;

}

#notifications-bottom-right-tab-avatar{

float: left;

height: 100px;

width: 70px;

margin-left: 20px;

}

#notifications-bottom-right-tab-avatar img{

-moz-border-radius: 50% 50% 50% 50%;

-webkit-border-radius: 50% 50% 50% 50%;

border-radius: 50% 50% 50% 50%;

-khtml-border-radius: 50% 50% 50% 50%;

float: left;

margin-top: 15px;

}

#notifications-bottom-right-tab-right{

float: left;

width: 210px;

margin-left: 20px;

margin-top: 20px;

}

#notifications-bottom-right-tab-right-title{

float: left;

width: 100%;

color: #252525;

font-weight: 600;

}

#notifications-bottom-right-tab-right-title span{

color: #e91e63;

}

#notifications-bottom-right-tab-right-text{

float: left;

width: 100%;

font-size: 14px;

color: #4c4c4c;

font-style: italic;

margin-top: 5px;

}

#notifications-bottom-center{

position: absolute;

width: 360px;

bottom: 90px;

left: 50%;

margin-left: -180px;

}

#notifications-bottom-center-tab{

background-color: rgba(255,255,255,1);

float: left;

height: 100px;

width: 360px;

margin-top: 20px;

position: relative;

-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.1);

-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.1);

box-shadow: 0px 0px 10px rgba(0,0,0,0.1);

}

#notifications-bottom-center-tab-close{

height: 20px;

width: 20px;

position: absolute;

top: 40px;

right: 20px;

color: #cccccc;

font-size: 18px;

line-height: 20px;

text-align: center;

-webkit-transition: all 0.5s;

-moz-transition: all 0.5s;

-o-transition: all 0.5s;

transition: all 0.5s;

}

#notifications-bottom-center-tab-close:hover {

color: rgba(102,102,102,1);

cursor: pointer;

}

#notifications-bottom-center-tab-avatar{

float: left;

height: 100px;

width: 100px;

}

#notifications-bottom-center-tab-avatar img{

float: left;

}

#notifications-bottom-center-tab-right{

float: left;

width: 210px;

margin-left: 20px;

margin-top: 20px;

}

#notifications-bottom-center-tab-right-title{

float: left;

width: 100%;

color: #252525;

font-weight: 600;

}

#notifications-bottom-center-tab-right-title span{

color: #e91e63;

}

#notifications-bottom-center-tab-right-text{

float: left;

width: 100%;

font-size: 14px;

color: #4c4c4c;

font-style: italic;

margin-top: 5px;

}

#notifications-top-center {

position: fixed;

left: 0px;

top: 0px;

width: 100%;

background-color: rgba(255,255,255,1);

height: 50px;

text-align: center;

line-height: 50px;

color: #404040;

font-size: 18px;

font-weight: 600;

}

#notifications-top-center-close {

background-color: rgba(233,30,99,0.6);

float: right;

height: 50px;

width: 50px;

font-size: 30px;

color: rgba(255,255,255,1);

font-weight: 400;

-webkit-transition: all 0.5s;

-moz-transition: all 0.5s;

-o-transition: all 0.5s;

transition: all 0.5s;

}

#notifications-top-center-close:hover {

cursor: pointer;

background-color: rgba(233,30,99,1);

}

#notifications-full{

-moz-box-shadow: 0px 0px 50px rgba(0,0,0,0.1);

-webkit-box-shadow: 0px 0px 50px rgba(0,0,0,0.1);

box-shadow: 0px 0px 50px rgba(0,0,0,0.1);

height: 300px;

width: 530px;

background-color: rgba(255,255,255,1);

position: fixed;

margin-top: 10%;

margin-left: -265px;

z-index: 2;

left: 50%;

top: 10%;

}

#notifications-full-close{

height: 20px;

width: 20px;

position: absolute;

top: 10px;

right: 10px;

color: #cccccc;

font-size: 20px;

line-height: 20px;

text-align: center;

-webkit-transition: all 0.5s;

-moz-transition: all 0.5s;

-o-transition: all 0.5s;

transition: all 0.5s;

}

#notifications-full-close:hover {

color: rgba(102,102,102,1);

cursor: pointer;

}

#notifications-full-icon{

float: left;

width: 100%;

font-size: 65px;

text-align: center;

height: 65px;

margin-top: 35px;

color: #404040;

}

#notifications-full-text{

width: 430px;

float: left;

margin-left: 50px;

text-align: center;

margin-top: 40px;

font-size: 16px;

line-height: 24px;

color: #404040;

}

JAVASCRIPT

该CSS消息提示动画效果使用js代码使#notifications容器具有响应式效果，具体代码如下：

function resize(){

$('#notifications').height(window.innerHeight - 50);

}

$( window ).resize(function() {resize();});

resize();

每个消息提示框中都有一个关闭按钮，插件中使用一个函数来实现关闭功能：

function refresh_close(){

$('.close').click(function(){$(this).parent().fadeOut(200);});

}

refresh_close();

每个部位的消息提示框的HTML代码都是在JS文件中动态添加的。例如上部的HTML结构代码如下：

var top = '

Oups something went wrong !

';

最后是在选择了相应的动画效果后，点击提交按钮时将各种效果的消息提示框插入到DOM中。当#notifications-window-row-button按钮被点击时，插件会检测当前选择的位置和动画效果，然后移除旧的内容，在将新的内容添加到DOM中。在添加了新的内容之后，再使用refresh_close()函数来使消息提示框的关闭按钮可用。上部和中部的消息提示框是插入在#notifications中，而中下和右下部位的消息提示框是分别插入到#notifications-bottom-center和#notifications-bottom-right中，注意这点区别。

$('#notifications-window-row-button').click(function(){

if($('#position').val()=='top'){

$("#notifications-top-center").remove();

$("#notifications").append(top);

$("#notifications-top-center").addClass('animated ' + $('#effects').val());

refresh_close();

}

if($('#position').val()=='center'){

$("#notifications-full").remove();

$("#notifications").append(center);

$("#notifications-full").addClass('animated ' + $('#effects').val());

refresh_close();

}

if($('#position').val()=='bottom'){

$("#notifications-bottom-center").html();

$("#notifications-bottom-center").html(bottom);

$("#notifications-bottom-center-tab").addClass('animated ' + $('#effects').val());

refresh_close();

}

if($('#position').val()=='botom_right'){

$("#notifications-bottom-right").html();

$("#notifications-bottom-right").html(bottom_center);

$("#notifications-bottom-right-tab").addClass('animated ' + $('#effects').val());

refresh_close();

}

});

});