对话框/Tips

可定时CSS3关闭的消息提示框插件

阿里云


这是一款使用纯 css3 制作的消息提示框插件。该插件在消息提示框被触发后显示在屏幕上,提示框上带有时间进度条,当进度条走到 100%时,消息提示框消失。

HTML 结构

html 结构非常简单:用一个 wrapper div 作为包裹容器,里面放一个用于显示信息的 p 标签和一个用来做进度条的 div。

也想出现在这里?联系我们
创客主机
  1. <div class="tn-box tn-box-color-1">
  2.     <p>Your settings have been saved successfully!</p>
  3.     <div class="tn-progress"></div>
  4. </div>

为了给包裹 div 设置不同的颜色,给它设置两个 class:tn-box 和 tn-box-color-1。

CSS 样式

  1. .tn-box {
  2.     width: 360px;
  3.     position: relative;
  4.     margin: 0 auto 20px auto;
  5.     padding: 25px 15px;
  6.     text-align: left;
  7.     border-radius: 5px;
  8.     box-shadow: 
  9.         0 1px 1px rgba(0,0,0,0.1), 
  10.         inset 0 1px 0 rgba(255,255,255,0.6);  
  11.     opacity: 0;
  12.     cursor: default;
  13.     display: none;
  14. }
  15.  
  16. .tn-box-color-1{
  17.     background: #ffe691;
  18.     border: 1px solid #f6db7b;
  19. }

设置包裹 div 的初始 dispaly:none,并给设置它的透明度为 0。进度条的样式如下:

  1. .tn-progress {
  2.     width: 0;
  3.     height: 4px;
  4.     background: rgba(255,255,255,0.3);
  5.     position: absolute;
  6.     bottom: 5px;
  7.     left: 2%;
  8.     border-radius: 3px;
  9.     box-shadow: 
  10.         inset 0 1px 1px rgba(0,0,0,0.05), 
  11.         0 -1px 0 rgba(255,255,255,0.6);
  12. }

动画开始前,进度条的宽度为 0。在 demo 中,使用一个 checkbox 来作为按钮触发消息提示框动画。

  1. input.fire-check:checked ~ section .tn-box {
  2.     display: block;
  3.     animation: fadeOut 5s linear forwards;
  4. }
  5. input.fire-check:checked ~ section .tn-box .tn-progress {
  6.     animation: runProgress 4s linear forwards 0.5s;
  7. }

因为按钮的动作发生在消息提示框之前,所以可以使用一般通用选择器来完成按钮操作。如果你想使用 javascript 来完成按钮动作,你可以像下面这样写样式:

  1. .tn-box.tn-box-active {
  2.     display: block;
  3.     animation: fadeOut 5s linear forwards;
  4. }
  5. .tn-box.tn-box-active .tn-progress {
  6.     animation: runProgress 4s linear forwards 0.5s;
  7. }

tn-box-active 是在按钮按下时被加到 tn-box div 中的 class。
下面是消息框淡入淡出动画效果:

  1. @keyframes fadeOut {
  2.     0%  { opacity: 0; }
  3.     10% { opacity: 1; }
  4.     90% { opacity: 1; transform: translateY(0px);}
  5.     99% { opacity: 0; transform: translateY(-30px);}
  6.     100% { opacity: 0; }
  7. }

下面是进度条的动画效果:

  1. @keyframes runProgress {
  2.     0%  { width: 0%; background: rgba(255,255,255,0.3); }
  3.     100% { width: 96%; background: rgba(255,255,255,1); }
  4. }

我们使它运动到进度条宽度的 96%,颜色上使用 RGBA。

可定时 CSS3 关闭的消息提示框插件

已有 393 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!