CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 利用 CSS3 的褪色和动画效果制作消息提醒框

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

CSS 盒子样式

       现代Web设计技术允许开发者快速实现大多数浏览器支持的动画。我想警告消息是很常见的,因为默认的JavaScript警告框的样式往往(与你自己设计的漂亮样式)很不协调很囧。这使开发者步入找出哪种解决方案能更好地实现更友好的用户界面的道路。

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

  下载源代码                     实际演示



 

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


 
 
   

Success!


    checkmark
   

Thanks so much for your message. We check e-mail frequently and will try our best to respond to your inquiry.


 
  
 
   

Warning!


    error
   

You did not set the proper return e-mail address. Please fill out the fields and then submit the form.


 
  
 

Click the error boxes to dismiss with a fading effect.


  
 

Add more by appending dynamic HTML into the page via jQuery. Plus the notifications are super easy to customize.


  
 
    New Success Box
    New Alert Box
 

       每个图标文件来自 免费的PSD 和UI作品. 这些图标被我调整为适当的大小.如何你需要警告/信息图标你可以变变颜色创建成你自己的. 这个类名 .notify 被添加到每一个消息DIV上. 它定义了DIV的阴影和字体类型.

       其它的类例如 .successbox 和 .errorbox 充许我们改变颜色和alert窗口里的细节. 你可以看到在我的测试页里加载了两个alert窗口. 每个页面底部的按钮点击后可以在页上下方追加一个新的alert窗口.

【利用 CSS3 的褪色和动画效果制作消息提醒框】相关文章

1. 利用 CSS3 的褪色和动画效果制作消息提醒框

2. 使用CSS3的褪色和动画效果构建消息提醒框

3. 利用CSS3制作动画效果

4. 利用CSS3制作动画效果

5. jQuery消息提示框插件Tipso

6. 构建HTML5应用程序:CSS3 效果、过渡和动画

7. 一组超实用的 CSS3 悬停效果和动画

8. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

9. 使用CSS制作APPLE WATCH刻度盘动画效果

10. CSS3动画效果-animate.css

本文来源:https://www.51html5.com/a992.html

点击展开全部

﹝利用 CSS3 的褪色和动画效果制作消息提醒框﹞相关内容

「利用 CSS3 的褪色和动画效果制作消息提醒框」相关专题

其它栏目

也许您还喜欢