巧妙使用 CSS3 的褪色和动画效果制作消息提醒框

王朝学院·作者佚名 2016-05-24

巧妙使用 CSS3 的褪色和动画效果制作消息提醒框现代Web设计技术允许开发者快速实现大多数浏览器支持的动画。我想警告消息是很常见的，因为默认的javaScript警告框的样式往往（与你自己设计的漂亮样式）很不协调很囧。这使开发者步入找出哪种解决方案能更好地实现更友好的用户界面的道路。

在这个教程中我想解释一下我们如何能把几个将要出现在网页上方的CSS3通知框放在一起。用户可以点击这些通知框使它们逐渐淡出消失，最终将他们从DOM中移除。作为一个有趣的附加功能，我还包括了一个按钮，你可以点击它来添加一个新的警告框到页面顶部。你可以下载查看一下我的示例演示，以对我们将做的事情有一个更好的了解。

实际演示–下载源代码

建立页面首先, 我们需要创建两个文件命名为“index.html” 和 “style.css”. 我将从Google CDN上调用最新的jQuery库. HTML是非常简单的,因为我们只需要在警告框里加入一些文本. 所有的Javascript代码被加在了页面的底部,这样可以节省HTTP请求时间.

12345678910

<!doctype html><html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>CSS3 Notification Boxes Demo</title><link rel="shortcut icon" href="http://designshack.net/favicon.ico"><link rel="icon" href="http://designshack.net/favicon.ico"><link rel="stylesheet" type="text/css" media="all" href="style.css"><script type="text/javascript" src="https://Ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></head>

头部代码设置了外部调用文件和 HTML5文档规范 . 不是很复杂因为我们只是建立一个简单的示例. 对于提示窗口我定义两个不同的样式 – 成功的和错误的. 还有一些其它风格的例如警告框和信息框, 但是我没有创建更多的,因为我更关注的是效果.

1234567891011121314151617181920212223

<div id="content"><div class="notify successbox"><h1>Success!</h1><span class="alerticon"><img src="images/check.png" alt="checkmark" /></span><p>Thanks so much for your message. We check e-mail frequently and will try our best to respond to your inquiry.</p></div><div class="notify errorbox"><h1>Warning!</h1><span class="alerticon"><img src="images/error.png" alt="error" /></span><p>You did not set the PRoper return e-mail address. Please fill out the fields and then submit the form.</p></div><p>Click the error boxes to dismiss with a fading effect.</p><p>Add more by appending dynamic HTML into the page via jQuery. Plus the notifications are super easy to customize.</p