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;
}
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
