admin 管理员组文章数量: 888398
css进度条动态显示,CSS3实现进度条动画
CSS
语言：
CSSSCSS
确定
.cube {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 500px;
height: 250px;
margin: auto;
background: #EDEFF5;
box-shadow: 1px 1px 5px #B9C0D8;
border-radius: 2px;
font-family: 'Open Sans', sans-serif;
}
.cube h1 {
text-align: center;
font-size: 14px;
margin-top: 70px;
color: #2c3e50;
}
.tg-qe-progress-bar {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 300px;
height: 8px;
margin: auto;
}
.tg-qe-progress-bar .bar {
width: 100%;
height: 100%;
border-radius: 10px;
background-color: #C2C8D8;
position: relative;
overflow: hidden;
}
.tg-qe-progress-bar .bar:before,
.tg-qe-progress-bar .bar:after {
height: inherit;
position: absolute;
background-color: #3F51B5;
top: 0;
left: 0;
right: 0;
border-radius: 10px;
content: "";
opacity: 1;
width: 90px;
}
.tg-qe-progress-bar.active .bar {
margin: auto;
}
.tg-qe-progress-bar.active .bar:before,
.tg-qe-progress-bar.active .bar:after {
animation-name: tgQeProgressBar;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
margin: auto;
opacity: 0;
}
.tg-qe-progress-bar.active .bar:before {
animation-delay: 0.75s;
}
.tg-qe-progress-bar button {
position: absolute;
top: 40px;
left: 0;
right: 0;
margin: auto;
width: 200px;
padding: 8px 0;
font-family: 'Open Sans', sans-serif;
border: 1px solid #8094A9;
color: #2c3e50;
border-radius: 3px;
text-transform: uppercase;
background-color: rgba(255, 255, 255, 0);
cursor: pointer;
}
@keyframes tgQeProgressBar {
0% {
width: 0;
opacity: 0;
}
50% {
width: 50%;
opacity: 1;
}
100% {
width: 100%;
opacity: 0;
}
}
本文标签： css进度条动态显示 CSS3实现进度条动画
版权声明：本文标题：css进度条动态显示,CSS3实现进度条动画 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1693585695h230750.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论