animate.css
这是一款基于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.5 s; -moz- transition : all 0.5 s; -o- transition : all 0.5 s; transition : all 0.5 s; } #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.5 s; -moz- transition : all 0.5 s; -o- transition : all 0.5 s; transition : all 0.5 s; } #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.5 s; -moz- transition : all 0.5 s; -o- transition : all 0.5 s; transition : all 0.5 s; } #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.5 s; -moz- transition : all 0.5 s; -o- transition : all 0.5 s; transition : all 0.5 s; } #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(); } }); }); |
原文地址:https://www.cnblogs.com/sunny-der/p/11763540.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Android视频悬浮窗口实现的示例代码
- 使用Laravel中的查询构造器实现增删改查功能
- Flutter 自定义Drawer 滑出位置的大小实例代码详解
- laravel5.1框架基础之路由详解
- flutter 自定义card阴影效果及card使用
- laravel5.1框架基础之Blade模板继承简单使用方法分析
- Yii框架的布局文件实例分析
- React Native 实现热更新并自动签名打包功能
- PHP命名空间用法实例分析
- Android自定义控件实现方向盘效果
- Android 使用fast-verification实现验证码填写功能的实例代码
- android studio 3.6.0 绑定视图新特性的方法
- Android ListView UI组件使用说明
- 解决laravel 出现ajax请求419(unknown status)的问题
- php求斐波那契数的两种实现方式【递归与递推】