2

我试图在模态框中创建一个人造进度条。应该让访问者在模态框停留 60 秒然后消失。

解决这个问题的最佳方法是什么？

我试图用 :hover 来说明我想要发生的事情。

.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; 
}
4

1 回答 1

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/

要在完成后使元素淡出，您必须为父元素 ( the.progressbar ) 制作另一个动画，并使用淡入淡出规则使其比进度条的动画更长。像这样：

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



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

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

于 2013-03-20T19:18:14.793 回答