-6

有没有办法在 HTML 中仅显示 2 秒钟的消息，在类似于以下的框中： 在此处输入图像描述

This item already does exist
4

2 回答 2

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 动画的可能设置。
 

也看看：

快乐编码！

于 2013-08-08T14:53:08.373 回答
0

这应该可以帮助您入门jQuery Growler

于 2013-08-08T14:38:15.550 回答