日期：2013-8-23 来源：GBin1.com
现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画，其中消息警示是非常普遍的。由于默认的JavaScript警示框往往设计不佳和过于侵入式，这导致开发人员想到找出一个更友好的用户界面解决方案。在本教程中，我会解释如何可以将CSS3警示框放在页面主体的顶部，然后， 用户可以通过点击让警示框消失，最终从DOM中删除。作为一个有趣的附加功能，我还提供了按钮，在这里你可以点击到页面顶部追加新的警示框。查看以下示例 演示，进一步了解我们的设计概念。
创建页面
首先我们需要命名“index.html”和“style.css”两个文件夹，我引用了由谷歌代码内容分发网络承载的最新jQuery库。HTML相当简单，因为我们只需要创建一些虚拟文本警示框。所有的JavaScript已添加到页面底部，以减少HTTP请求。
<!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文档类型。并不难理解，因为我们只是构建一个示例演示。对于警示窗口，设置了两种不同的风格——成功和错误。当然还有其他的设计风格，但我没有创建备用样式，我想更专注于效果。
<div id="content">
<!-- Icons source http://dribbble.com/shots/913555-Flat-Web-Elements -->
<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>
<div class="btns clearfix">
<a href="#" id="newSuccessBox" class="flatbtn">New Success Box</a>
<a href="#" id="newAlertBox" class="flatbtn">New Alert Box</a>
</div>
</div><!-- @end #content -->
每个图标图像都来自于免费的PSD of flat elements和 UI部分，我可以用勾号和X错误按钮来缩放和调整这些图标矢量形状。如果你需要一个警告/信息类的图标，它应该可以自定义颜色和风格。常用的 类.notify被添加到每个消息框中，将产生框架阴影效果和内部字体样式。其他的类比如.successbox和.errorbox则允许我们改变警示 框的色彩和细节。在我的演示中你能见到页面加载两个现有的警示消息，每个底部的按钮作用是追加新的警示框。
CSS消息框风格.......
via 极客标签
相关推荐
是一种利用CSS3的强大功能来实现的视觉效果，它通过CSS3的animation属性创建了一种生动的火警图标，伴随着声波振动的动画，以此来模拟火警报警器的工作状态，提升用户体验，增强警示效果。在网页设计中，这种动态...
CSS3作为现代网页设计的关键技术，提供了丰富的样式和动画功能，让开发者能够创建出极具吸引力和交互性的用户界面。以下五款不同的边框线条动画特效正是CSS3强大能力的体现。 1. **渐变边框动画** 这种效果通过...
在本文中，我们将深入探讨如何使用CSS3和JavaScript来创建一个独特的倒计时警报灯效果。这个特效能够为网站或应用添加引人注目的视觉提示，尤其适用于通知用户某个重要事件即将发生。 首先，CSS3是层叠样式表的第三...
为了使警报灯在倒计时过程中有动态变化，我们可以使用CSS3的关键帧动画（@keyframes）来实现颜色渐变效果： ```css @keyframes colorTransition { 0% { background-color: #FF0000; } 100% { background-color: #...
在网页开发中，表单验证是必不可少的一部分，它确保用户...总之，结合jQuery的便利性和CSS3的视觉表现力，我们可以创建出既实用又美观的表单验证效果。这不仅提升了用户体验，也使开发者在处理表单验证时更加得心应手。
CSS3是CSS的最新版本，引入了许多新的特性，如选择器的增强、多列布局、阴影和渐变、动画与过渡效果等。在这个项目中，我们可以期待看到CSS3的新特性被广泛应用于动物形状的创建和动态效果的实现，如使用伪元素和伪...
CSS3是CSS的最新版本，引入了许多新功能和改进，如媒体查询、边框半径、渐变、阴影、动画和过渡等。在红色行业门户模板中，CSS3的使用可能体现在自定义的按钮效果、响应式布局（通过媒体查询实现）、动态特效等方面...
3. **CSS3新增属性及伸缩盒布局**：CSS3引入了许多新特性，如渐变、阴影、动画、多列布局等，增强了网页设计的表现力。伸缩盒布局（Flexbox）则为响应式设计提供了强大的工具，可以方便地处理容器内元素的对齐和分布...
Anime.js 是一个强大的JavaScript库，专门用于创建流畅的前端动画效果。这个压缩包"18种基于anime.js的文字动画特效源码.zip"包含了18个不同的文字动画效果，这些都是利用anime.js库实现的。这些源码可以为网页设计...
通过合理的参数配置和逻辑设计，可以创建出具有警示功能的动态灯光效果，提升游戏的沉浸感和用户体验。在实际开发中，还可以根据项目的具体需求进一步优化和扩展这个系统，例如添加多种警报模式或视觉特效。
在这个项目中，"自爆按钮装置"的绘制很可能利用了CSS3的特性，如渐变、阴影、边框半径以及动画效果，使得按钮在视觉上更具吸引力和冲击力。CSS3的`transition`和`animation`属性可以用于实现按钮被点击后的状态变化...