从顶部弹出的通知

您是否见过这种设计模式，其中通知从浏览器窗口顶部弹出，然后滑走？我们可以用纯 CSS 来实现它。

我们只需要创建一个 div

<div id="note">
    You smell good.
</div>

然后我们对其进行样式设置并将其放在屏幕顶部

#note {
    position: absolute;
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;
    background: #fde073;
    text-align: center;
    line-height: 2.5;
    overflow: hidden; 
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
}

让我们来制作动画

使用关键帧动画，我们可以将其“隐藏”在浏览器窗口上方，并将其短暂地下拉

@-webkit-keyframes slideDown {
    0%, 100% { -webkit-transform: translateY(-50px); }
    10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
    0%, 100% { -moz-transform: translateY(-50px); }
    10%, 90% { -moz-transform: translateY(0px); }
}

呃……让我们快速考虑一下其他浏览器

但是让我们考虑一下那些没有转换和动画的浏览器。对于它们，我们希望默认情况下始终显示通知栏，并能够将其关闭。

因此，我们将制作 Modernizr 的自定义版本来测试转换和动画，加载它，然后我们可以编写 CSS 来测试这些功能，并且只有在支持这些功能的浏览器中才会触发动画。

.cssanimations.csstransforms #note {
    -webkit-transform: translateY(-50px);
    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
    -moz-transform:    translateY(-50px);
    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;
}

其中的 1.0s 是动画运行之前的延迟时间。最好等待一分钟，以使通知更加显眼。

现在，我们将一个关闭按钮添加到 HTML 中

<div id="note">
    You smell good. <a id="close">[close]</a>
</div>

以及一些 JavaScript 代码放在页面底部，以便不支持动画的浏览器可以关闭通知。

<script>
 close = document.getElementById("close");
 close.addEventListener('click', function() {
   note = document.getElementById("note");
   note.style.display = 'none';
 }, false);
</script>

看，不需要任何库。

由于我们不需要在支持动画的浏览器中使用该关闭按钮，因此我们将将其隐藏起来

.cssanimations.csstransforms #close {
  display: none;
}

记录一下，这在移动浏览器上应该可以正常工作（已在 Mobile Safari 上测试）。此处没有使用固定定位，只使用了绝对定位，这在未来会成为一个更小的问题（可能需要考虑将其设置为固定定位，这样即使用户向下滚动页面，他们也会收到通知）。

享受

查看演示   下载文件