这是一款基于animate.css的效果非常酷的CSS消息提示动画效果。这66种CSS消息提示动画效果按出现位置分为4种类型：上部、中部、中下和右下。每个部位的消息提示效果都是不一样的。
注意：这个CSS消息提示动画效果需要在支持CSS3的浏览器中才能正常工作。
HTML结构
该CSS消息提示动画效果的HTML结构非常简单。使用一个id为#notifications的div作为整个包裹容器。
<div id="notifications"></div>
|
消息提示框的代码默认情况下是不存在与DOM中的，它们使用js来动态插入。例如当选择"Top"选项时，在点击触发按钮后，Top消息提示框将使用js插入到DOM中：
<div id="notifications-top-center">
<span class="iconb" data-icon=""></span>
Oups something went wrong !
<div id="notifications-top-center-close" class="close">
<span class="iconb" data-icon=""></span>
</div>
</div>
|
对于中部、中下和右下几个部位的消息提示框也是相同的操作。它们默认是不存在与DOM中的，只有在触发了相应的事件时，才使用jQuery来将HTML代码插入到DOM中的相应位置上。
<div id="notifications-full">
<div id="notifications-full-close" class="close"><span class="iconb" data-icon=""></span></div>
<div id="notifications-full-icon"><span class="iconb" data-icon=""></span></div>
<div id="notifications-full-text">...</div>
</div>
<div id="notifications-bottom-center-tab">
<div id="notifications-bottom-center-tab-close" class="close"><span class="iconb" data-icon=""></span></div>
<div id="notifications-bottom-center-tab-avatar"><img src="_assets/avatar.png" width="100" height="100" /></div>
<div id="notifications-bottom-center-tab-right">
<div id="notifications-bottom-center-tab-right-title"><span>delmarks</span> sent you a message</div>
<div id="notifications-bottom-center-tab-right-text">...</div>
</div>
</div>
<div id="notifications-bottom-right-tab">
<div id="notifications-bottom-right-tab-close" class="close"><span class="iconb" data-icon=""></span></div>
<div id="notifications-bottom-right-tab-avatar"><img src="_assets/avatar.png" width="70" height="70" /></div>
<div id="notifications-bottom-right-tab-right">
<div id="notifications-bottom-right-tab-right-title"><span>delmarks</span> sent you a message</div>
<div id="notifications-bottom-right-tab-right-text">...</div>
</div>
</div>
|
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 = '<div id="notifications-top-center"><span class="iconb" data-icon=""></span> Oups something went wrong !<div id="notifications-top-center-close" class="close"><span class="iconb" data-icon=""></span></div></div>';
|
最后是在选择了相应的动画效果后，点击提交按钮时将各种效果的消息提示框插入到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();
}
});
});
|