Genie、Slide-in、Jelly和scale Pop-up通知的效果
网站需要通知来显示紧急或额外信息。弹出窗口用于传递通知，如果有效地在正确的时间使用，它们是有效的。通知效果，取决于网站的主要主题，带来网站的独特品味和标志性外观。
在这篇文章中，你将学习如何应用其中的一些通知效果，包括Genie、Slide-in、Jelly和scale Pop-up通知效果。
你将学习如何建立醒目的效果，并体会到这些效果取决于所显示的信息类型。
主要收获
在本文结束时，你将学会如何在网页上应用以下通知效果。
- 滑入效果
- 精灵效果
- 比例增长效果
- 果冻弹出效果
你还将了解到一些我们可以在你的网页上使用的通知效果以及何时使用它们。
前提条件
为了使你能跟上这篇文章，你需要知道/具备以下条件。
- 了解HTML的基础知识。知道如何创建网页并将其他文件链接到网页上。
- 善于使用CSS。
- 与JavaScript的互动。
- 网络开发IDE。它应该支持网页预览功能。这些在开发过程中会有帮助。我推荐Visual Studio Code IDE。
项目文件夹结构
创建一个名为Notifications 的根文件夹。所有的项目代码都在这里。
根文件夹的结构将如下图所示。
.
├── css (folder)
│ ├── demonstration.css (file)
│ ├── normalization.css (file)
│ ├── default_notification.css (file)
│ └── growl-notification-style.css (file)
├── js (folder)
│ ├── classEditor.js (file)
│ ├── modernizr.custom.js (file)
│ └── notificationFunction.js (file)
├── growl-effects-genie.html (file)
├── growl-effects-jelly.html (file)
├── growl-effects-scale.html (file)
└── growl-effects-slide-in.html (file)
整体网页结构
在growl-effects-scale.html ，添加以下代码段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title>Notification Styles | Growl-Style</title>
<link href="css/normalization.css" rel="stylesheet" type="text/css"/>
<link href="css/default_notification.css" rel="stylesheet" type="text/css"/>
<script src="js/modernizr.custom.js"></script>
<link href="css/growl-notification-style.css" rel="stylesheet" type="text/css"/>
<link href="css/demonstration.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="main-container">
<!-- Top Navigation -->
<header class="notifications-header">
<h1>Notification Styles
<span>Simple, easy and effective ideas & animation effects for website notifications</span>
</h1>
</header>
<div class="main clear-fixes">
<div class="column">
<p class="small-text">Click this button to show a notification:</p>
<button class="progress-button" id="notification-trigger">
<span class="content">Show a Notification</span>
<!--Addition of an empty span-->
<span class="progress">
<!--No content-->
</span>
</button>
</div>
<div class="column">
<nav class="notifications-demos">
<h3>Growl-like: </h3>
<div>
<a class="current-demo" href="growl-effects-scale.html">Scale</a>
<a href="growl-effects-jelly.html">Jelly</a>
<a href="growl-effects-slide-in.html">Slide in</a>
<a href="growl-effects-genie.html">Genie</a>
</div>
</nav>
</div>
</div>
</div>
<!-- /main-container -->
<script src="js/classEditor.js"></script>
<script src="js/notificationFunction.js"></script>
</body>
</html>
在growl-effects-genie.html 文件中复制粘贴上面的代码。在growl-effects-jelly.html 和growl-effects-slide-in.html 文件中重复该步骤。
在上述文件中修改当前页面的类，使其显示在该页面上。
这显示在下面。
在growl-effects-genie.html:
<div>
<a href="growl-effects-scale.html">Scale</a>
<a href="growl-effects-jelly.html">Jelly</a>
<a href="growl-effects-slide-in.html">Slide in</a>
<!-- Show that it is currently active -->
<!-- This is by adding the 'current-demo' class referenced in the CSS-->
<a class="current-demo" href="growl-effects-genie.html">Genie</a>
</div>
在其他两个文件中重复这个步骤，得到下面的代码为。
growl-effects-jelly.html:
<div>
<a href="growl-effects-scale.html">Scale</a>
<a class="current-demo" href="growl-effects-jelly.html">Jelly</a>
<a href="growl-effects-slide-in.html">Slide in</a>
<a href="growl-effects-genie.html">Genie</a>
</div>
growl-effects-slide-in.html:
<div>
<a href="growl-effects-scale.html">Scale</a>
<a href="growl-effects-jelly.html">Jelly</a>
<a class="current-demo" href="growl-effects-slide-in.html">Slide in</a>
<a href="growl-effects-genie.html">Genie</a>
</div>
添加网页的样式
在demonstration.css 文件中。
创建颜色模板，以便于为页面选择。
/* You can choose colors quickly from the color templates below*/
:root {
--white: #fff;
--black: #00000099;
--medium-black: #00000033;
--shadow-black: #00000019;
--light-black: #333;
--light-blue: #97d2f1;
--bright-blue: #6cc1ed;
--sky-blue: #5699bc;
--dark-blue: #00a2d3;
--navy-blue: #729DBF;
--deep-dark-blue: #415F76CC;
--light-green: #67c58f;
--light-green-shadow: #0000000C;
--medium-green: #72BF7B;
--forest-green: #1f8a4c;
--hill-green: #1c2e2d;
--blue-green: #0eada0;
--green-blue: #00cfbe;
--indigo: #415f76;
--light-purple: #7772bf;
--purple: #484860;
--light-yellow: #B3BF72;
--light-orange: #BFA372;
}
对前后的所有元素使用border-box 。前后都设置clear_fix类的样式。
/*All*/
*, /*All elements after*/
*:after, /*All elements before*/
*:before {
/*These two set how the overall width and height is calculated*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.clear-fixes:after,
.clear-fixes:before {
/*No content*/
content: '';
display: table;
}
.clear-fixes:after {
clear: both;
}
格式化html 和body 元素。
html,
body {
height: 100vh;
width: 100vw;
}
body {
/*body formatting*/
background: var(--bright-blue);
font-weight: 400;
font-size: 1em;
font-family: 'Raleway', Calibri, Arial, sans-serif;
line-height: 1.25;
z-index: 1;
color: #f5f3ec;
position: relative;
}
为链接、按钮和容器元素设置样式。
button, a {
/*No outline*/
outline: none;
}
a {
/*No text-decoration*/
text-decoration: none;
color: #0000007F;
}
a:focus, a:hover {
color: var(--white);
}
.main-container {
min-height: 100vh;
}
格式化页眉和页眉跨度。
/* Header */
.notifications-header {
padding: 0 2em 0;
margin: 0 auto;
/*Align the text to the center*/
text-align: center;
}
.notifications-header h1 {
line-height: 1.3;
margin: 0;
font-size: 3.5em;
}
.notifications-header h1 span {
font-weight: 300;
display: block;
font-size: 46%;
opacity: 0.7;
padding: 0.4em 0 0.6em 0.1em;
}
格式化使你能够访问其他网页的按钮。
/* To Navigation Style */
/* Demo Buttons Style */
.notifications-demos {
font-size: 0.8em;
padding-top: 1em;
}
.notifications-demos div {
padding-bottom: 1em;
margin-left: 90px;
}
.notifications-demos a {
padding: 0.35em 0.9em 0.35em;
margin: 0.35em 0.1em;
display: inline-block;
outline: none;
color: var(--white);
background: rgba(255, 255, 255, 0.3);
font-weight: 700;
font-size: 110%;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
border-radius: 2px;
}
.notifications-demos a.current-demo, .notifications-demos a:hover {
background: rgba(0, 0, 0, 0.2);
border-color: initial;
color: inherit;
}
.notifications-demos h3 {
padding: 1em 0 0.5em 0;
margin: 0;
min-width: 90px;
font-size: 0.9em;
clear: left;
float: left;
}
格式化主要内容和栏目中的内容。
/* Main content */
/* Main */
.main-container {
padding: 3% 0 10%;
max-width: 69em;
margin: 0 auto;
}
/* Column */
.column {
padding: 0 2.5em;
position: relative;
width: 50%;
min-height: 200px;
float: left;
}
/* First column formatting */
.column:first-child {
text-align: right;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
}
/* Paragraph found in the column */
.column p {
font-size: 1.8em;
margin: 0;
font-weight: 300;
line-height: 1.5;
padding: 0 0 0.5em;
}
/* small-text found in the column */
.column p.small-text {
line-height: 1.2;
padding: 0.75em 0 1em;
font-weight: 700;
font-size: 1em;
}
格式化进度条。该条作为一个事件的触发例子，导致通知弹出。
造型如下图所示。
/* Notification progress bar */
/* This mimics a process that produces a notification */
.progress-button {
padding: 0 3em;
border: none;
position: relative;
overflow: hidden;
display: inline-block;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 1em;
outline: none;
color: var(--white);
border-radius: 5px;
background: var(--medium-black);
line-height: 4;
z-index: 50;
}
/* Text inside the progress button */
.progress-button .content {
z-index: 10;
display: block;
position: relative;
transition: transform 0.3s;
-webkit-transition: -webkit-transform 0.3s;
}
/* Progress button transition animation */
.progress-button .progress {
top: 0;
height: 100%;
width: 0;
left: 0;
position: absolute;
opacity: 0;
background: var(--medium-black);
z-index: 0;
transition: width 0s 0.3s, opacity 0.3s;
-webkit-transition: width 0s 0.3s, opacity 0.3s;
}
/* Active button on the progress styling */
.progress-button.active .progress {
width: 100%;
opacity: 1;
transition: width 1.2s;
-webkit-transition: width 1.2s;
}
为不同的显示尺寸创建屏幕响应性。
/* Allow the screen to be responsive */
@media screen and (max-width: 25em) {
.notifications-header h1 {
font-size: 2.5em;
}
}
@media screen and (max-width: 46.5em) {
.column {
padding: 2em;
font-size: 90%;
min-width: auto;
width: 100%;
min-height: auto;
}
.column:first-child {
box-shadow: inset 0 -1px 0 var(--shadow-black);
text-align: center;
}
}
在窗口中添加一个通知
在名为js 的JavaScript文件夹中，打开 "notificationFunction.js "文件。
在该文件中，你将做以下工作。
创建一个函数，将接收窗口作为参数。该函数以后将调用它。该函数将容纳所有其他的函数在其中。
这段代码如下所示。
(function (window, document) {
/** This enables you to avoid using undeclared variables */
'use strict';
})(window, document);
在该函数中，你将得到网页中的根元素。
这段代码返回HTML元素。添加指代动画结束的事件名称的结尾。你还将创建一个函数，检查一个对象是否有它持有的属性。如果有，它将把该属性添加到前一个对象中。
extend 函数将被用于notificationFunction 函数中。它将把一个新的属性放到最初被保存有另一个属性的对象上。
这在下面的代码中显示。
/** Get the root element and link the animation end event names*/
let support = {animations: Modernizr.cssanimations},
animEndEventNames = {
'WebkitAnimation': 'webkitAnimationEnd',
'OAnimation': 'oAnimationEnd',
'msAnimation': 'MSAnimationEnd',
'animation': 'animationend'
},
// animation end event name
animEndEventName = animEndEventNames[Modernizr.prefixed('animation')];
/**
* extend object function
*/
function extend(obj_a, obj_b) {
for (let key in obj_b) {
if (obj_b.hasOwnProperty(key)) {
obj_a[key] = obj_b[key];
}
}
return obj_a;
}
/**
* NotificationFunction function
*/
function NotificationFunction(options) {
this.options = extend({}, this.options);
extend(this.options, options);
this._init();
}
创建一个notificationFunction options 函数，允许人们轻松设置通知类型和样式。
该函数允许人们设置以下内容。
- 通知的封装器
- 信息
- 布局
- 效果
- 显示后离开场景所需的时间（totalTimeToLeave）。时间的单位是毫秒(ms)。
- 开启和关闭的回调函数
这些都很好地显示在下面。
/**
* NotificationFunction options
*/
NotificationFunction.prototype.options = {
// The element to which the notification will be appended to in the application
// The defaults are to the 'document.body' element
notificationWrapper: document.body,
// the notificationMessage
notificationMessage: 'Hello!!! Developer!',
notificationLayout: 'growl',
// The effects to be set for the specified notification Layout:
// for growl notification Layout: { genie || scale || jelly || slide } effects
notificationEffect: 'slide',
// error,warning, success, notice
// This step will add class notification-type-warning, notification-type-error or notification-type-success
notificationType: 'error',
// if the current user does not close the notification then it gets removed
// This is automatically after the following time
totalTimeToLeave: 5000,
// Some of the callback functions
onClose: function () {
/*return the output of false*/
return false;
},
onOpen: function () {
/*return the output of false*/
return false;
}
};
请记住，通知的包装是可以改变的。如果通知应该只在网页的某个元素或部分出现，这就很方便了。
在上面的函数下面添加一个新函数。这个函数是用来初始化和缓存创建的变量。
该函数将做以下工作。
- 在HTML文件中创建一个新的
div元素。 - 为创建的元素添加类。这种添加有助于通知继承样式表中的属性和样式。
- 在该元素中添加上面选项中指定的信息。
- 给创建的元素添加一个关闭标签。
- 将通知附加到正文或在
options.notificationWrapper中指定的元素。 - 检查通知是否仍在活动或开启。如果是，一旦
options.totalTimeToLeave中的时间用完，就解除通知。
/**
* initialization function
* initialize and cache some variables for the application
*/
NotificationFunction.prototype._init = function () {
// create HTML structure
this.ntf = document.createElement('div');
this.ntf.className = 'ns-boxes ns-' + this.options.notificationLayout + ' ns-effect-' + this.options.notificationEffect + ' ns-type-' + this.options.notificationType;
let innerString = '<div class="ns-boxes-inner">';
innerString += this.options.notificationMessage;
innerString += '</div>';
innerString += '<span class="ns-close"></span></div>';
this.ntf.innerHTML = innerString;
// append to body or the element specified in options.notificationWrapper
// This creates the notification before the first child in the HTML file.
this.options.notificationWrapper.insertBefore(this.ntf, this.options.notificationWrapper.firstChild);
// dismiss after [options.totalTimeToLeave]ms
let notification_self = this;
if (this.options.totalTimeToLeave) { // checks to make sure totalTimeToLeave is not set to false in notification initialization
this.dismisstotalTimeToLeave = setTimeout(function () {
if (notification_self.active) {
notification_self.dismiss();
}
}, this.options.totalTimeToLeave);
}
// init events
this._initEvents();
};
创建一个函数，当人们点击关闭按钮时，就会解除通知。
/**
* initialize the notification events
*/
NotificationFunction.prototype._initEvents = function () {
let notification_self = this;
// dismiss notification
this.ntf.querySelector('.ns-close')
.addEventListener('click',
function () {
notification_self.dismiss();
});
};
添加一个显示通知的函数。它将利用classEditor.js 文件中的函数来搜索类的名称，并从元素中删除它们。
该函数将添加另一个类到其中。然后它执行on-open回调函数。
请看下面这个。
/**
* show the notification
*/
NotificationFunction.prototype.show = function () {
this.active = true;
classEditor.remove(this.ntf, 'ns-hide');
classEditor.add(this.ntf, 'ns-show');
if (typeof this.options.onOpen === 'function')
this.options.onOpen();
};
添加一个函数，一旦超时用完或通知关闭按钮被点击，就解除通知。
超时时间将被清除。ns-show 类的名称也将被删除。然后该函数执行关闭时的回调函数，如果指定的话。
执行回调函数程序的时间被设置为25ms。
一旦通知结束，该函数就会删除通知元素。如果它在DOM元素内部的target ，没有找到通知，那么它返回false。
/**
* dismisses the notification
*/
NotificationFunction.prototype.dismiss = function () {
let notification_self = this;
this.active = false;
clearTimeout(this.dismisstotalTimeToLeave);
classEditor.remove(this.ntf, 'ns-show');
setTimeout(function () {
classEditor.add(notification_self.ntf, 'ns-hide');
// callback
if (typeof notification_self.options.onClose === 'function')
notification_self.options.onClose();
}, 25);
// after animation ends remove ntf from the DOM
let onEndAnimationFn = function (ev) {
if (support.animations) {
if (ev.target !== notification_self.ntf) return false;
this.removeEventListener(animEndEventName, onEndAnimationFn);
}
notification_self.options.notificationWrapper.removeChild(notification_self.ntf);
};
if (
/*Found in Modernizr file*/
support.animations
) {
/*An event listener*/
this.ntf.addEventListener(animEndEventName, onEndAnimationFn);
} else {
/*Returns this function*/
onEndAnimationFn();
/*End*/
}
};
添加notificationFunction 函数，使其成为在所有窗口中看到的全局函数。这一步允许该函数在HTML文件中快速使用。
在下面的代码中可以看到这一点。
/**
* add to the global namespace
*/
window.NotificationFunction = NotificationFunction;
创建函数来搜索HTML文件中的类
打开classEditor.js 文件，添加一个函数，将窗口作为参数输入并调用。
/*
* classEditor - It contains class helper functions
*
* These functions include:-
*
* classEditor.has( element, 'my-current-class' ) -->>> true or false
* classEditor.add( element, 'my-new-class' )
* classEditor.remove( element, 'my-unwanted-class' )
* classEditor.toggle( element, 'my-class' )
*/
/*jshint browser: true, strict: true, undef: true */
/*global define: false */
(function (window, document) {
/** This enables you to avoid using undeclared variables */
'use strict';
})(window, document);
创建一个RegEX 函数，搜索文件中处于其他字之间的类名。
// class helper functions for the application
function class_Regex(class_name) {
return new RegExp("(^|\\s+)" + class_name + "(\\s+|$)");
}
// classList support for the management of classes
// The API accepts only one change at once instead of multiple classes
let hasThisClass, addsClass, removesClass;
if ('classList' in document.documentElement) {
hasThisClass = function (element, Class) {
return element.classList.contains(Class);
};
addsClass = function (element, Class) {
element.classList.add(Class);
};
removesClass = function (element, Class) {
element.classList.remove(Class);
};
} /*If not execute this*/
else {
hasThisClass = function (element, Class) {
return class_Regex(Class).test(element.className);
};
addsClass = function (element, Class) {
if (!hasThisClass(element, Class)) {
element.className = element.className + ' ' + Class;
}
};
removesClass = function (element, Class) {
element.className = element.className.replace(class_Regex(Class), ' ');
};
}
创建一个togglesClass 函数，使用hasThisClass 程序来检查文件中是否有该类的元素。如果有，它就删除它并添加另一个。这充当了一个切换函数。
function togglesClass(element, Class) {
let functionFn = hasThisClass(element, Class) ? removesClass : addsClass;
functionFn(element, Class);
}
缩短函数或程序的名称，以便它们能被轻易使用。
let classEditor = {
// The function full names
removeClass: removesClass,
toggleClass: togglesClass,
addClass: addsClass,
hasClass: hasThisClass,
// short names for the functions above
remove: removesClass,
add: addsClass,
toggle: togglesClass,
has: hasThisClass
};
使classEditor 函数成为工作区的一个全局函数。
// transport
if (typeof define === 'function') {
define(classEditor);
} else {
// It is found in the browser at a global scope
window.classEditor = classEditor;
}
修改HTML文件，添加通知
在growl-effects-scale.html 文件中，就在<script src="js/notificationFunction.js"></script> 行的下面，添加一个脚本，做以下工作。
创建一个可以自我调用的函数。
它将容纳其他函数。
<script>
(function () {
})();
</script>
监听来自进度条按钮的点击。它启用按钮的点击。
请看下面的这个按钮。
let notificationButton = document.getElementById('notification-trigger');
// make sure the button is disabled
notificationButton.disabled = false;
添加一个函数，使被点击的按钮失效。
然后它使用之前创建的notificationFunction 函数来快速设置通知的选项。它可以确保按钮不被禁用，因为禁用按钮可以防止双击，直到通知消失。
至于growl 布局，它支持以下的通知效果。
- 规模（将在
growl-effects-scale.html文件中使用） - 果冻
- 滑入
- 精灵
notificationButton.addEventListener('click', function () {
// simulate loading (for demo purposes only)
classEditor.add(notificationButton, 'active');
setTimeout(function () {
classEditor.remove(notificationButton, 'active');
// create the notification
let notification = new NotificationFunction({
// Added an apostrophe (') escape character in the notificationMessage to avoid errors
notificationMessage: '<p>Hello there!!! I\'m a classic notification pop-up, but I have some Jelly elasticity thanks to <a href="http://bouncejs.com/">bounce.js</a>. </p>',
notificationLayout: 'growl',
notificationEffect: 'scale',
notificationType: 'notice',
totalTimeToLeave: 5000,
// On close of the notification, enable the button
onClose: function () {
notificationButton.disabled = false;
}
});
// This function Displays the notification
notification.show();
}, 1200);
// disable the button (This is meant for demonstration purposes only)
this.disabled = true;
});
在动画中使用一个经过压缩的modernizr文件
将其内容复制到js 文件夹中的modernizr.custom.js 文件。通过直接复制粘贴代码或在复制粘贴之前将其作为RAW文件查看来完成这一工作。
'modernizr.custom.js'已经生成并从这个Modernizr网站下载。
Modernizr.com为一个人生成了一个最小化的JS文件，可以检测到正在使用的浏览器和它所支持的功能。这减少了HTML文件中的浏览器黑名单，并允许开发人员根据浏览器的功能来定制体验。
下载的文件将使网页能够在网页上显示通知。
人们注意到，它看起来几乎不像是一个弹出式通知。其原因是它还没有被格式化。
格式化通知
使通知看起来像一个弹出式通知。
在default_notification.css 文件中做以下工作。
/* Common, default styles for the notification box */
.ns-boxes {
position: fixed;
font-size: 90%;
font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
padding: 22px;
line-height: 1.4;
z-index: 1000;
background: rgba(42, 45, 50, 0.85);
color: rgba(250, 251, 255, 0.95);
pointer-events: none;
}
为通知显示时的通知框设置样式。
/* Notification 'on show' styling */
.ns-boxes.ns-show {
/*Set the pointer-events to auto*/
pointer-events: auto;
}
对通知框中的链接和段落进行格式化。
这个样式显示在下面。
/* Notification link styling */
.ns-boxes a {
opacity: 0.6;
font-weight: 700;
/* The current color can be used indirectly for other color attributes e.g border color */
color: inherit;
}
.ns-boxes a:hover, .ns-boxes a:focus {
opacity: 1;
}
/* Notification paragraph styling */
.ns-boxes p {
margin: 0;
}
在通知可见时添加自动指针事件。
/* Visible notification styling */
.ns-boxes.ns-show, .ns-boxes.ns-visible {
/*Set the pointer-events to auto*/
pointer-events: auto;
}
当通知被关闭时，对通知的前后进行样式设计。
请看下面这个。
/* `on close` notification styling */
.ns-close {
overflow: hidden;
top: 4px;
right: 4px;
width: 20px;
height: 20px;
text-indent: 100%;
position: absolute;
cursor: pointer;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ns-close:hover, .ns-close:focus {
outline: none;
}
/* Notification 'on close' before and after styling */
.ns-close::after, .ns-close::before {
left: 50%;
top: 50%;
height: 60%;
width: 3px;
content: '';
background: #6e6e6e;
position: absolute;
}
.ns-close:hover::after, .ns-close:hover::before {
background: var(--white);
}
.ns-close::before {
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
}
.ns-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
}
这种风格设计的结果如下图所示。
注意，现在的通知看起来更像一个弹出式通知。唯一的问题是，它不能自动关闭，也不能关闭。通过在growl-notification-style.css 文件中添加一些CSS样式来解决这些问题。
在通知中添加咆哮的效果
在growl-notification-style.css 文件中，添加咆哮效果。
这段代码。
添加咆哮样式，这些样式将与所有类型的咆哮效果共享。
为每个咆哮效果集添加单独的效果。这要从规模效果开始。缩放效果复制它的名字。它从一个小尺寸扩展到一个大尺寸。
它产生一个通知，其动画显示在下面的GIF中。
添加了Jelly动画效果。它的某些部分是由Bouncejs.com生成的。
Bouncejs.com是一个用来为网站生成超棒的CSS3动画的网站。点击该网站可以查看一些可用的预设，或为网站量身定做的动画。
通过在浏览器中打开或点击网页上的Jelly 按钮，前往growl-effects-jelly.html 。点击SHOW NOTIFICATION ，查看动画。
该动画看起来就像下面GIF中的那样。
在项目中添加了滑入动画。通过点击Slide in 按钮打开growl-effects-slide-in.html 。这个文件的通知样式设置为滑动，因此它将实现slide in 的效果。
该效果显示在下图的GIF中。
最后，在该文件中，添加飞起来的效果。这个效果可以在growl-effects-genie.html 文件中看到，通过点击Genie 按钮进入。
这方面的代码如下所示。
使网页正常化
通过直接复制粘贴代码或在复制粘贴之前将其视为RAW文件来完成。
文件中的代码可以使网页元素看起来很好。它是额外的格式化，使网页看起来对其他浏览器有吸引力。
使用Coolors.co来生成颜色模板，以获得更有视觉吸引力的网站。
总结
在这篇文章中，我们学到了以下内容。
- 为一个通知创建一个网页结构。
- 格式化网页。
- 添加一个通知的触发事件。
- 在网页上添加一个通知。
- 改变通知的类型。
- 根据创建的模板，改变网站的颜色。
