带有幻灯片动画的可关闭底部栏

Closeable bottom bar with slide animation

本文关键字：底部 幻灯片 动画      更新时间：2023-09-26

我想要一个在我的网页底部有一个漂亮动画的栏，类似于这个：http://css-tricks.com/pop-from-top-notification/但一直停留在屏幕上直到它关闭。这是我迄今为止拥有的所有css：

.about {
background: black;
text-align: left;
position: fixed;
z-index: 100; 
bottom: 0; 
left: 0;
width: 100%;
color: #0f0;
font-size: 21px;
font-family: Timeburner;
padding: 10px;
}

我不在乎它是否需要jquery或其他什么东西，只要它有效。

您需要添加此css：

@-webkit-keyframes slideUp {
   0%   { -webkit-transform: translateY(50px); }
   100% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideUp {
    0%   { -moz-transform: translateY(50px); }
    100% { -moz-transform: translateY(0px); }
}
 #note {
    -webkit-transform: translateY(-50px);
    -webkit-animation: slideUp 2.5s 1.0s 1 ease forwards;
    -moz-transform:    translateY(-50px);
    -moz-animation:    slideUp 2.5s 1.0s 1 ease forwards;
}

这是Fiddle演示

以下是Css动画的示例：Fiddle（您需要为关闭按钮添加JS）

下面是一个关闭时向下滑动的例子：Fiddle它使用Jquery，但也可以使用纯JS:

 close = document.getElementById("close");
 close.addEventListener('click', function() {
     $("#note").slideUp();
 }, false);
相关文章：