浙江 杭州

jQuery和CSS3微软Xbox One样式的消息框特效

系统分类: 网页特效 - jquery插件 - jQuery Tooltips 2017-03-23

人气1240

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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

制作方法

HTML结构

该消息框的HTML结构如下,主要结构分为三个部分:div.impactdiv.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);
}                
              

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:17.00KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1849.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery和CSS3微软Xbox One样式的消息框特效

我当前G币余额:0 已下载次数:0

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

点击右侧分享按钮并且进行评论 +10G币(已有2 评论)