对话框/Tips

CSS3消息提示动画效果

阿里云


这是一款基于 animate.css 的效果非常酷的 CSS 消息提示动画效果。这 66 种 CSS 消息提示动画效果按出现位置分为 4 种类型:上部、中部、中下和右下。每个部位的消息提示效果都是不一样的。这 66 种 CSS 消息提示动画效果按出现位置分为 4 种类型:上部、中部、中下和右下。每个部位的消息提示效果都是不一样的。注意:这个 CSS 消息提示动画效果需要在支持 CSS3 的浏览器中才能正常工作。

HTML 结构

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

也想出现在这里?联系我们
创客主机
  1. <div id="notifications"></div>

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

  1. <div id="notifications-top-center">
  2.   <span class="iconb" data-icon=""></span>
  3.   Oups something went wrong !
  4.   <div id="notifications-top-center-close" class="close">
  5.   <span class="iconb" data-icon=""></span>
  6.   </div>
  7. </div>

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

  1. <div id="notifications-full">
  2.   <div id="notifications-full-close" class="close"><span class="iconb" data-icon=""></span></div>
  3.   <div id="notifications-full-icon"><span class="iconb" data-icon=""></span></div>
  4.   <div id="notifications-full-text">...</div>
  5. </div>
  6.  
  7. <div id="notifications-bottom-center-tab">
  8.   <div id="notifications-bottom-center-tab-close" class="close"><span class="iconb" data-icon=""></span></div>
  9.   <div id="notifications-bottom-center-tab-avatar"><img src="_assets/avatar.png" width="100" height="100" /></div>
  10.   <div id="notifications-bottom-center-tab-right">
  11.   <div id="notifications-bottom-center-tab-right-title"><span>delmarks</span> sent you a message</div>
  12.   <div id="notifications-bottom-center-tab-right-text">...</div>
  13.   </div>
  14. </div>
  15.  
  16. <div id="notifications-bottom-right-tab">
  17.   <div id="notifications-bottom-right-tab-close" class="close"><span class="iconb" data-icon=""></span></div>
  18.   <div id="notifications-bottom-right-tab-avatar"><img src="_assets/avatar.png" width="70" height="70" /></div>
  19.   <div id="notifications-bottom-right-tab-right">
  20.   <div id="notifications-bottom-right-tab-right-title"><span>delmarks</span> sent you a message</div>
  21.   <div id="notifications-bottom-right-tab-right-text">...</div>
  22.   </div>
  23. </div>

CSS 样式

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

  1. #notifications-bottom-right {
  2.   position: absolute;
  3.   width: 360px;
  4.   right: 20px;
  5.   bottom: 20px;
  6. }
  7. #notifications-bottom-right-tab{
  8.   background-color: rgba(255,255,255,1);
  9.   float: left;
  10.   height: 100px;
  11.   width: 360px;
  12.   margin-top: 20px;
  13.   position: relative;
  14.   -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
  15.   -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
  16.   box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
  17.  
  18. }
  19. #notifications-bottom-right-tab-close{
  20.   height: 20px;
  21.   width: 20px;
  22.   position: absolute;
  23.   top: 40px;
  24.   right: 20px;
  25.   color: #cccccc;
  26.   font-size: 18px;
  27.   line-height: 20px;
  28.   text-align: center;
  29.   -webkit-transition: all 0.5s;
  30.   -moz-transition: all 0.5s;
  31.   -o-transition: all 0.5s;
  32.   transition: all 0.5s;
  33. }
  34. #notifications-bottom-right-tab-close:hover {
  35.   color: rgba(102,102,102,1);
  36.   cursor: pointer;
  37. }
  38. #notifications-bottom-right-tab-avatar{
  39.   float: left;
  40.   height: 100px;
  41.   width: 70px;
  42.   margin-left: 20px;
  43. }
  44. #notifications-bottom-right-tab-avatar img{
  45.   -moz-border-radius: 50% 50% 50% 50%;
  46.   -webkit-border-radius: 50% 50% 50% 50%;
  47.   border-radius: 50% 50% 50% 50%;
  48.   -khtml-border-radius: 50% 50% 50% 50%;
  49.   float: left;
  50.   margin-top: 15px;
  51. }
  52. #notifications-bottom-right-tab-right{
  53.   float: left;
  54.   width: 210px;
  55.   margin-left: 20px;
  56.   margin-top: 20px;
  57. }
  58. #notifications-bottom-right-tab-right-title{
  59.   float: left;
  60.   width: 100%;
  61.   color: #252525;
  62.   font-weight: 600;
  63. }
  64. #notifications-bottom-right-tab-right-title span{
  65.   color: #e91e63;
  66. }
  67. #notifications-bottom-right-tab-right-text{
  68.   float: left;
  69.   width: 100%;
  70.   font-size: 14px;
  71.   color: #4c4c4c;
  72.   font-style: italic;
  73.   margin-top: 5px;
  74. }
  75. #notifications-bottom-center{
  76.   position: absolute;
  77.   width: 360px;
  78.   bottom: 90px;
  79.   left: 50%;
  80.   margin-left: -180px;
  81. }
  82. #notifications-bottom-center-tab{
  83.   background-color: rgba(255,255,255,1);
  84.   float: left;
  85.   height: 100px;
  86.   width: 360px;
  87.   margin-top: 20px;
  88.   position: relative;
  89.   -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
  90.   -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
  91.   box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
  92. }
  93. #notifications-bottom-center-tab-close{
  94.   height: 20px;
  95.   width: 20px;
  96.   position: absolute;
  97.   top: 40px;
  98.   right: 20px;
  99.   color: #cccccc;
  100.   font-size: 18px;
  101.   line-height: 20px;
  102.   text-align: center;
  103.   -webkit-transition: all 0.5s;
  104.   -moz-transition: all 0.5s;
  105.   -o-transition: all 0.5s;
  106.   transition: all 0.5s;
  107. }
  108. #notifications-bottom-center-tab-close:hover {
  109.   color: rgba(102,102,102,1);
  110.   cursor: pointer;
  111. }
  112. #notifications-bottom-center-tab-avatar{
  113.   float: left;
  114.   height: 100px;
  115.   width: 100px;
  116. }
  117. #notifications-bottom-center-tab-avatar img{
  118.   float: left;
  119. }
  120. #notifications-bottom-center-tab-right{
  121.   float: left;
  122.   width: 210px;
  123.   margin-left: 20px;
  124.   margin-top: 20px;
  125. }
  126. #notifications-bottom-center-tab-right-title{
  127.   float: left;
  128.   width: 100%;
  129.   color: #252525;
  130.   font-weight: 600;
  131. }
  132. #notifications-bottom-center-tab-right-title span{
  133.   color: #e91e63;
  134. }
  135. #notifications-bottom-center-tab-right-text{
  136.   float: left;
  137.   width: 100%;
  138.   font-size: 14px;
  139.   color: #4c4c4c;
  140.   font-style: italic;
  141.   margin-top: 5px;
  142. }
  143. #notifications-top-center {
  144.   position: fixed;
  145.   left: 0px;
  146.   top: 0px;
  147.   width: 100%;
  148.   background-color: rgba(255,255,255,1);
  149.   height: 50px;
  150.   text-align: center;
  151.   line-height: 50px;
  152.   color: #404040;
  153.   font-size: 18px;
  154.   font-weight: 600;
  155. }
  156. #notifications-top-center-close {
  157.   background-color: rgba(233,30,99,0.6);
  158.   float: right;
  159.   height: 50px;
  160.   width: 50px;
  161.   font-size: 30px;
  162.   color: rgba(255,255,255,1);
  163.   font-weight: 400;
  164.   -webkit-transition: all 0.5s;
  165.   -moz-transition: all 0.5s;
  166.   -o-transition: all 0.5s;
  167.   transition: all 0.5s;
  168. }
  169. #notifications-top-center-close:hover {
  170.   cursor: pointer;
  171.   background-color: rgba(233,30,99,1);
  172. }
  173. #notifications-full{
  174.   -moz-box-shadow: 0px 0px 50px rgba(0,0,0,0.1);
  175.   -webkit-box-shadow: 0px 0px 50px rgba(0,0,0,0.1);
  176.   box-shadow: 0px 0px 50px rgba(0,0,0,0.1);
  177.   height: 300px;
  178.   width: 530px;
  179.   background-color: rgba(255,255,255,1);
  180.   position: fixed;
  181.   margin-top: 10%;
  182.   margin-left: -265px;
  183.   z-index: 2;
  184.   left: 50%;
  185.   top: 10%;
  186. }
  187. #notifications-full-close{
  188.   height: 20px;
  189.   width: 20px;
  190.   position: absolute;
  191.   top: 10px;
  192.   right: 10px;
  193.   color: #cccccc;
  194.   font-size: 20px;
  195.   line-height: 20px;
  196.   text-align: center;
  197.   -webkit-transition: all 0.5s;
  198.   -moz-transition: all 0.5s;
  199.   -o-transition: all 0.5s;
  200.   transition: all 0.5s;
  201. }
  202. #notifications-full-close:hover {
  203.   color: rgba(102,102,102,1);
  204.   cursor: pointer;
  205. }
  206. #notifications-full-icon{
  207.   float: left;
  208.   width: 100%;
  209.   font-size: 65px;
  210.   text-align: center;
  211.   height: 65px;
  212.   margin-top: 35px;
  213.   color: #404040;
  214. }
  215. #notifications-full-text{
  216.   width: 430px;
  217.   float: left;
  218.   margin-left: 50px;
  219.   text-align: center;
  220.   margin-top: 40px;
  221.   font-size: 16px;
  222.   line-height: 24px;
  223.   color: #404040;
  224. }

JAVASCRIPT

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

  1. function resize(){
  2. $('#notifications').height(window.innerHeight - 50);
  3. }
  4.  
  5. $( window ).resize(function() {resize();}); 
  6. resize();

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

  1. function refresh_close(){
  2. $('.close').click(function(){$(this).parent().fadeOut(200);});
  3. }
  4. refresh_close();

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

  1. 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 中,注意这点区别。

  1. $('#notifications-window-row-button').click(function(){ 
  2.  
  3. if($('#position').val()=='top'){
  4.  
  5.     $("#notifications-top-center").remove();
  6.   $("#notifications").append(top);
  7.   $("#notifications-top-center").addClass('animated ' + $('#effects').val());
  8.   refresh_close();
  9.  
  10.   } 
  11. if($('#position').val()=='center'){
  12.  
  13.   $("#notifications-full").remove();
  14.   $("#notifications").append(center);
  15.   $("#notifications-full").addClass('animated ' + $('#effects').val());
  16.   refresh_close();
  17.  
  18.   }
  19. if($('#position').val()=='bottom'){
  20.  
  21.     $("#notifications-bottom-center").html();
  22.   $("#notifications-bottom-center").html(bottom);
  23.   $("#notifications-bottom-center-tab").addClass('animated ' + $('#effects').val());
  24.   refresh_close();
  25.  
  26.   }
  27. if($('#position').val()=='botom_right'){
  28.  
  29.   $("#notifications-bottom-right").html();
  30.   $("#notifications-bottom-right").html(bottom_center);
  31.   $("#notifications-bottom-right-tab").addClass('animated ' + $('#effects').val());
  32.   refresh_close();
  33.  
  34.   } 
  35. });
  36. });

CSS3 消息提示动画效果

已有 595 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!