创建CSS3警示框渐变动画

程序员文章站 2022-06-02 10:10:36

...

日期：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 极客标签