我有一个有 3 个圆圈的 CSS3 圆圈加载器。我遇到了问题 每个圆圈(从第一个圆圈开始)应该在几秒钟后淡出,可能使用 CSS 动画。任何帮助表示赞赏。
问问题
1590 次
3 回答
3
I'd go a slightly different route. Only made for webkit but you can alter as needed: http://jsfiddle.net/8kQ2u/17/
@-webkit-keyframes fades {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.circle span {
display: inline-block;
width: 15px;
height: 15px;
margin: 9.975em auto;
background: #dbdbdb;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
-webkit-animation-duration: 1.5s;
-webkit-animation-name: fades;
-webkit-animation-iteration-count: infinite;
}
.circle span:nth-child(2) {
-webkit-animation-delay: 0.2s;
}
.circle span:nth-child(3) {
-webkit-animation-delay: 0.4s;
}
:nth-child
here is fine since I'm pretty sure it has full support in browsers that support @keyframes
. You could use the sibling selector if you prefered (+
).
于 2012-12-21T15:22:58.033 回答
1
使用关键帧就可以了:http: //jsfiddle.net/Nux3z/
几个细节:
1) Use of :nth-child, or :first-child, etc to target your elements
2) Timing of animations: I'm using 1.7, 2.7, rather than 0.7s, 1.4s because I'm allowing for the 1s of fade to finish NOT simply doubling/tripling the time each element takes to animate.
3) Not a solution for IE
于 2012-12-21T15:32:56.070 回答
0
正如其他人所说,在这里使用动画和时间是必不可少的。
实际上,每个圆圈都使用相同的动画,
但是您必须对每个圆圈应用不同的延迟。
见下文(我也在使用nth-child
代替first-child
):
.circle span {
/** The same animation to each circle **/
-webkit-animation: circleFade 3s linear infinite;
}
/** Different animation delays **/
.circle span:nth-child(1) { -webkit-animation-delay: 1s; }
.circle span:nth-child(2) { -webkit-animation-delay: 2s; }
.circle span:nth-child(3) { -webkit-animation-delay: 3s; }
/** Animation **/
@-webkit-keyframes circleFade {
0% { background: #ddd; }
25% { background: #999; }
35% { background: #999; }
60% { background: #ddd; }
}
于 2012-12-21T15:53:45.683 回答