html临时通知消息

Question

有没有办法在HTML中显示2秒内的消息，类似于：

This item already does exist

Answer 1

据我所知，使用纯HTML（5）是不可能的。

然而，它正在使用 CSS3动画！只需将其与动画延迟结合使用。

例如：

.tooltip {
    ...YOUR CSS HERE...

    /* The desired time (2 seconds) before the animation starts */
    -vendor-animation-delay: 2s;

    -vendor-animation-duration: 1s;
    -vendor-animation-fill-mode: both;
    -vendor-animation-name: fadeOut;
}

@-vendor-keyframes fadeOut {
    0% {opacity: 1;}    
    100% {opacity: 0;}
}

为了便于阅读，我遗漏了-webkit-，-moz-等浏览器前缀。所以，用它们替换-vendor-。

请注意，这仅适用于支持CSS3的浏览器。请查看caniuse.com以获取更多兼容性信息。

动画css也可以写成一行，但我使用这个变体来显示css3动画的可能设置。

另请看：

• CSS3 Please
• Animate.css
• HTML5 Timers

快乐的编码！

Answer 2

这可以帮助您开始使用jQuery Growler