Question

我想在我的网页底部有一个条形图，它有一个很好的动画，类似于这个：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或其他东西，只要它有效。

Answer 1

你需要添加这个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 Demo

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

这里有一个示例，在关闭时向下滑动：Fiddle它使用Jquery，但也可以使用纯JS完成：

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

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

1 个答案: