微软Xbox One样式消息框特效

PetitQ 对话框/Tips 2018-10-26 1.83K 0 0

这是一款仿照微软 Xbox One 样式的消息框制作的 jQuery 和 CSS3 通知消息框特效。该消息框分为三个部分，每个部分在消息框被激活时将依次打开，再依次关闭，效果非常的酷。

HTML 结构：

该消息框的 HTML 结构如下，主要结构分为三个部分：div.impact，div.message-container 和一个[h1]标签。

也想出现在这里？联系我们吧

```
<div class="pull">
```
```
  <div class="notification positive">
```
```
  <div class="flex-container">
```
```
      <div class="impact">
```
```
        <div class="icon">
```
```
          <i class="fa fa-gamepad"></i>
```
```
        </div>
```
```
      </div>
```
```
      <div class="message-container">
```
```
        <div class="message">
```

          <strong>jQueryScript is online</strong>

```
        </div>
```
```
      </div>
```
```
    </div>
```

    <h1>Hold <img src="xbox.png" alt="" class="xbox-logo"> to launch</h1>

```
  </div>
```
```
</div>
```

CSS 样式：

该消息框的包裹容器被制作为 3D 空间。

```
.pull {
```
```
  position: fixed;
```
```
  bottom: 0;
```
```
  width: 100%;
```
```
  -webkit-perspective: 250px;
```
```
          perspective: 250px;
```

  -webkit-perspective-origin: right center;

          perspective-origin: right center;

  -webkit-transition: -webkit-perspective .1s ease;

          transition: perspective .1s ease;

```
}
```
```
.pull.open {
```
```
  -webkit-perspective: 500px;
```
```
          perspective: 500px;
```
```
}
```

消息框的布局采用 flexbox 的布局方式。

```
.notification .flex-container {
```
```
  display: -webkit-box;
```
```
  display: -webkit-flex;
```
```
  display: -ms-flexbox;
```
```
  display: flex;
```
```
  -webkit-box-orient: horizontal;
```
```
  -webkit-box-direction: normal;
```
```
  -webkit-flex-direction: row;
```
```
      -ms-flex-direction: row;
```
```
          flex-direction: row;
```
```
  -webkit-flex-wrap: no-wrap;
```
```
      -ms-flex-wrap: no-wrap;
```
```
          flex-wrap: no-wrap;
```
```
  -webkit-box-align: stretch;
```
```
  -webkit-align-items: stretch;
```
```
      -ms-flex-align: stretch;
```
```
          align-items: stretch;
```

  -webkit-transition: -webkit-transform .35s ease;

          transition: transform .35s ease;

  -webkit-transform: translate3d(0, 45px, 0);

          transform: translate3d(0, 45px, 0);

```
}
```

.notification .flex-container.drop-down {

  -webkit-transform: translate3d(0, 0, 0);

          transform: translate3d(0, 0, 0);

```
}
```

其中 transform: translate3d(0, 0, 0);用于性能优化，开启 GPU。

JAVASCRIPT 代码：

核心的 jQuery 代码如下，有两个函数：openNotification()和 closeNotification()分别用于打开和关闭消息框：

```
$(function () {
```

    $('.notification').addClass('notification-hidden');

```
    openNotification('positive');
```

    setTimeout(closeNotification, 10000);

```
});
```
```
$('.again').click(function () {
```
```
    openNotification('positive');
```

    setTimeout(closeNotification, 10000);

```
});
```

function openNotification(whichNotification) {

    var thisNotification = $('.notification.' + whichNotification);

    thisNotification.removeClass('notification-hidden');

```
    setTimeout(function () {
```

        thisNotification.addClass('open');

        var openNotification = $('.notification.open');

```
        $('.pull').addClass('open');
```

        openNotification.addClass('show').addClass('open--rot');

```
        setTimeout(function () {
```

            openNotification.addClass('open--width');

```
        }, 1250);
```
```
        setTimeout(function () {
```

            openNotification.find('.flex-container').addClass('drop-down');

```
        }, 3000);
```

        $('body').append('<div class="overlay"></div>');

```
    }, 50);
```
```
}
```
```
function closeNotification() {
```
```
    var type = $('.notification.open');
```

    type.find('.drop-down').removeClass('drop-down');

```
    setTimeout(function () {
```

        type.removeClass('open--width');

```
    }, 400);
```
```
    setTimeout(function () {
```
```
        type.removeClass('open--rot');
```
```
    }, 700);
```
```
    setTimeout(function () {
```
```
        type.removeClass('show');
```
```
    }, 900);
```
```
    setTimeout(function () {
```
```
        $('.overlay').remove();
```
```
        type.removeClass('open');
```
```
    }, 1000);
```
```
    setTimeout(function () {
```

        type.addClass('notification-hidden');

```
    }, 1050);
```
```
}
```

微软 Xbox One 样式消息框特效

已有 458 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

对话框/Tips

微软Xbox One样式消息框特效

HTML 结构：

CSS 样式：

JAVASCRIPT 代码：

微软 Xbox One 样式消息框特效

相关文章

响应式jQuery消息通知框和信息提示框插件

jQuery+CSS3全屏带过渡动画弹窗

轻量级jQuery模态对话框插件

发表回复取消回复

热销模板

对话框/Tips

HTML 结构：

CSS 样式：

JAVASCRIPT 代码：

微软 Xbox One 样式消息框特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复