利用 CSS3 的褪色和动画效果制作消息提醒框
在这个教程中我想解释一下我们如何能把几个将要出现在网页上方的CSS3通知框放在一起。用户可以点击这些通知框使它们逐渐淡出消失,最终将他们从DOM中移除。作为一个有趣的附加功能,我还包括了一个按钮,你可以点击它来添加一个新的警告框到页面顶部。你可以下载查看一下我的示例演示,以对我们将做的事情有一个更好的了解。
下载源代码 实际演示
头部代码设置了外部调用文件和 HTML5文档规范 . 不是很复杂因为我们只是建立一个简单的示例. 对于提示窗口我定义两个不同的样式 – 成功的和错误的. 还有一些其它风格的例如警告框和信息框, 但是我没有创建更多的,因为我更关注的是效果.
Success!
Thanks so much for your message. We check e-mail frequently and will try our best to respond to your inquiry.
Warning!
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 的褪色和动画效果制作消息提醒框】相关文章
3. 利用CSS3制作动画效果
4. 利用CSS3制作动画效果
8. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果
本文来源:https://www.51html5.com/a992.html
﹝利用 CSS3 的褪色和动画效果制作消息提醒框﹞相关内容
- HTML5 Maker – 在线轻松制作 HTML5 动画效果
- CSS3动画效果入门
- CSS3 transition实现超酷图片墙动画效果
- CSS3 transition实现超酷图片墙动画效果
- CSS3实现的图片加载动画效果
- Magic CSS3 – 创建各种神奇的交互动画效果
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
- 使用CSS3的step()生成的动画效果
- 10款重量级CSS3的全新特效 实现绚丽前端动画效果
- 使用CSS3设计漂亮的动画效果3D大按钮