Question

我试图在模态框中创建一个虚拟进度条。应将访客留在模态框中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; 
}

Answer 1

你已经完成了一切。只需将这些过渡更改为动画并创建关键帧。

.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/

做一个虚假进度吧

1 个答案: