创建CSS3警示框渐变动画

2023-07-25 17:38:46

来源：GBin1.com

创建CSS3警示框渐变动画

在线演示   在线下载

现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画，其中消息警示是非常普遍的。由于默认的JavaScript警示框往往设计不佳和过于侵入式，这导致开发人员想到找出一个更友好的用户界面解决方案。在本教程中，我会解释如何可以将CSS3警示框放在页面主体的顶部，然后， 用户可以通过点击让警示框消失，最终从DOM中删除。作为一个有趣的附加功能，我还提供了按钮，在这里你可以点击到页面顶部追加新的警示框。查看以下示例 演示，进一步了解我们的设计概念。

在线演示——下载源代码

创建CSS3警示框渐变动画

创建页面

首先我们需要命名“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="data: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="data: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消息框风格

我创建了一批默认的排版，在内部使用#content集中包装元素。这将允许jQuery在页面顶部追加新的警示元素。

/** typography **/

h1 {

  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  font-size: 2.5em;

  line-height: 1.5em;

  letter-spacing: -0.05em;

  margin-bottom: 20px;

  padding: .1em 0;

  color: #444;

    position: relative;

    overflow: hidden;

    white-space: nowrap;

    text-align: center;

}

h1:before,

h1:after {

  content: "";

  position: relative;

  display: inline-block;

  width: 50%;

  height: 1px;

  vertical-align: middle;

  background: #f0f0f0;

}

h1:before {

  left: -.5em;

  margin: 0 0 0 -50%;

}

h1:after {

  left: .5em;

  margin: 0 -50% 0 0;

}

h1 > span {

  display: inline-block;

  vertical-align: middle;

  white-space: normal;

}

p {

  display: block;

  font-size: 1.35em;

  line-height: 1.5em;

  margin-bottom: 22px;

}

/** page structure **/

#w {

  display: block;

  width: 750px;

  margin: 0 auto;

  padding-top: 30px;

}

#content {

  display: block;

  width: 100%;

  background: #fff;

  padding: 25px 20px;

  padding-bottom: 35px;

  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;

  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;

  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;

}

.flatbtn {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

  display: inline-block;

  outline: 0;

  border: 0;

  color: #f9f8ed;

  text-decoration: none;

  background-color: #b6a742;

  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

  font-size: 1.2em;

  font-weight: bold;

  padding: 12px 22px 12px 22px;

  line-height: normal;

  text-align: center;

  vertical-align: middle;

  cursor: pointer;

  text-transform: uppercase;

  text-shadow: 0 1px 0 rgba(0,0,0,0.3);

  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  border-radius: 3px;

  -webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);

  -moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);

  box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);

}

.flatbtn:hover {

  color: #fff;

  background-color: #c4b237;

}

.flatbtn:active {

  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);

  -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);

  box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);

}

网站布局要保持简单，这样效果才明显。熟悉前端Web开发的人都应该能够将这些类移植到自己的样式表中，我使用的风格特征是扁平按钮生成新的警示框。同样，我已经更新了.notify类内部每个元素的风格。

/** notifications **/

.notify {

  display: block;

  background: #fff;

  padding: 12px 18px;

  max-width: 400px;

  margin: 0 auto;

  cursor: pointer;

  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  border-radius: 3px;

  margin-bottom: 20px;

  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px;

}

.notify h1 { margin-bottom: 6px; }

.successbox h1 { color: #678361; }

.errorbox h1 { color: #6f423b; }

.successbox h1:before, .successbox h1:after { background: #cad8a9; }

.errorbox h1:before, .errorbox h1:after { background: #d6b8b7; }

.notify .alerticon {

  display: block;

  text-align: center;

  margin-bottom: 10px;

}

我设置了一些默认的假设在示例布局中，每一条通知信息都限制在400px宽度并居中显示，代码是margin: 0 auto。另外，我更新了光标图标指针手，以便让用户知道整个元素是可点击的。我们需要创建一个jQuery事件监听器，每当用户点击消除通知，监听器就 得以记录。

jQuery动画

我的JS代码执行两个不同的操作。首席，我们检测到任何包含在#content div中现有的.notify元素。一旦用户点击这个.notify框，通知框就下降到0%的不透明度，然后把（）元素从DOM中完全删除。

$(function(){

  $('#content').on('click', '.notify', function(){

    $(this).fadeOut(350, function(){

      $(this).remove(); // after fadeout remove from DOM

    });

  });

如果你习惯于通常的jQuery，那么你可以一开始会对下面这个选择器感到奇怪。我们没有选择#content div，而实际上是利用内容容器选择任何.notify通知框。如果你查看jQuery的.on()函数，你就会发现我们通过另一种选择作为第二个参数将更新后的页面呈现出来。这里有个很棒的Stack Overflow能更详细的解释这个概念。我的脚本其他部分能检查到用户是否点击了页面底部任何一个按钮，这些按钮运用IDs #newSuccessBox和#newAlertBox.每当用户点击停止，结果是停止加载HREF值的默认操作，取而代之在页面上前置一个新的HTML块。

// handle the additional windows

  $('#newSuccessBox').on('click', function(e){

    e.preventDefault();

    var samplehtml = $('<div class="notify successbox"> <h1>Success!</h1> <span class="alerticon"><img src="data:images/check.png" alt="checkmark" /></span> <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p> </div>').prependTo('#content');

  });

  $('#newAlertBox').on('click', function(e){

    e.preventDefault();

    var samplehtml = $('<div class="notify errorbox"> <h1>Warning!</h1> <span class="alerticon"><img src="data: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>').prependTo('#content');

  });

});

我的这个项目中每个函数都有自己的变量，包含HTML复制/粘贴镜。这个HTML内容被存放在字符串中，使用jQuery选择器作为一个对象。我用prependTo()然后选择content div，最终新的警示框就能出现在页面的最顶部。所有新的警示框也可以用同样的方式删除，这是因为它们的HTML代码是完全相同的静态HTML硬编码。

在线演示——下载源代码

创建CSS3警示框渐变动画

via 极客标签

来源：创建CSS3警示框渐变动画

上一篇：【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局


下一篇：CSS3鼠标滑过动画线条边框特效