制作虚拟进度条

我试图在模态框中创建人造进度条。应保持访问者在模式框中60秒，然后消失。制作虚拟进度条

接触这个的最好方法是什么？

我试图说明我想要发生的事情：悬停。

.progressbar{ 
    width:80%; 
    height:16px; 
    margin:0 auto 20px auto; 
    padding:0px; 

    background:#cfcfcf; 
    border-width:1px; 
    border-style:solid; 
    border-color: #aaa #bbb #fff #bbb;  
    box-shadow:inset 0px 2px 3px #bbb;  
} 

.progressbar, 
.progressbar-inner{ 
    border-radius:4px; 
    -moz-border-radius:4px; 
    -webkit-border-radius:4px; 
    -o-border-radius:4px; 
} 

.progressbar-inner{ 
    width:0%; /* Change to actual percentage */ 
    height:100%; 
    background-size:18px 18px; 
    background-color: #82ae40;  
    box-shadow:inset 0px 2px 8px rgba(255, 255, 255, .5), inset -1px -1px 0px rgba(0, 0, 0, .2); 
} 

.progressbar:hover .progressbar-inner{ 
    width:100%; 
    -webkit-transition: width 60s ease-in; 
    -moz-transition: width 60s ease-in; 
    -o-transition: width 60s ease-in; 
    transition: width 60s ease-in; 
} 

.progressbar .progressbar-inner, 
.progressbar:hover .progressbar-inner{ 
    -webkit-transition: width 60s ease-in; 
    -moz-transition: width 60s ease-in; 
    -o-transition: width 60s ease-in; 
    transition: width 60s ease-in; 
}

来源

2013-03-20 Sergey

如果你想广泛的兼容性，我建议** **不与CSS过渡这样做。 – Brad 2013-03-20 19:11:55

http://jqueryui.com/progressbar/ – Travesty3 2013-03-20 19:13:07

同样支持高对比度模式并添加了ARIA标记http://hanshillen.github.com/jqtest/#goto_progressbar – FelipeAls 2013-03-20 19:24:26

你已经做了很多事情。只需将这些转换更改为动画并创建关键帧。

.progressbar .progressbar-inner, 
.progressbar:hover .progressbar-inner{ 
-webkit-animation: width 60s ease-in; 
-moz-animation: width 60s ease-in; 
-o-animation: width 60s ease-in; 
animation: width 60s ease-in; 
}

@-webkit-keyframes width { 
0% {width:0%;} 
100% {width:100%;} 
} 
@-moz-keyframes width { 
0% {width:0%;} 
100% {width:100%;} 
} 
@-o-keyframes width { 
0% {width:0%;} 
100% {width:100%;} 
} 
@keyframes width { 
0% {width:0%;} 
100% {width:100%;} 
}

在这里，你正在创建，使进度条成长的动画，它的造型与animation声明的元素。

一些文献：
http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/
https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations

兼容性图表：http://caniuse.com/#feat=css-animation

现场演示：http://jsfiddle.net/szXxe/

要结束时淡出元素时，你不得不再拍动画父元素（,.progressbar），并使其长一点比淡入规则的进度条动画还要多。像这样：

.progressbar{ 
animation:fadeout 61s ease-in; 
}

@keyframes fadeout { 
0% {opacity:1;} 
98% {opacity:1;} 
100% {opacity:0;} 
}

现场演示：http://jsfiddle.net/43nuU/

来源

2013-03-20 19:18:14 henryaaron

制作虚拟进度条

回答

相关问题