html - CSS 进度条

Question

我试图在几秒钟后隐藏一个进度条并显示一个 div。我已经编写了这个 jsFiddle，但似乎没有工作。

jsFiddle

Answer 1

你可以在 css 中轻松做到这一点

.blue{
 width: 200px;
 background-color: blue;
 height:30px;
 left:40px;
 top:30px;
 padding:5px;
 }
 .blue>div{
 background-color:red;
 height:25px;
 width:50px;
 top:10px;
 }

<div class="blue" ><div>20%</div></div>

Answer 2

您需要浏览器前缀：

@keyframes bubbly
{...}

@-moz-keyframes bubbly /* Firefox */
{...}

@-webkit-keyframes bubbly /* Safari and Chrome */
{...}mymove

@-o-keyframes bubbly /* Opera */
{...}

所以它几乎适用于所有浏览器。