倒计时
2016-09-18 本文已影响7人
debt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* :root {
5s: 5s;
#001823: #001823;
#00c15e: #00c15e;
}
*/
html {
font-size: 1vmin;
background: #001823 radial-gradient(closest-corner, rgba(255,255,255,.1), rgba(255,255,255,0));
height: 100%;
}
@keyframes rotate1 {
25% { left: 0; transform: rotate(-135deg); opacity: 1; }
25.01% { left: -.5em; opacity: 0; }
50% { left: 0; opacity: 0; }
50.01% { opacity: 1; transform: rotate(-135deg); }
75% { left: 0; transform: rotate(-315deg); }
100% { transform: rotate(-315deg); }
}
@keyframes rotate2 {
25% { right: 0; transform: rotate(-135deg); opacity: 1; }
25.01% { right: -.5em; opacity: 0; }
50% { right: 0; opacity: 0; }
50.01% { opacity: 1; transform: rotate(-135deg); }
75% { right: 0; transform: rotate(-315deg); }
100% { transform: rotate(-315deg); }
}
@keyframes container {
25% { transform: translate3d(0, -50%, 0); width: .5em; }
50% { transform: translate3d(-100%, -50%, 0); width: .5em; }
75% { transform: translate3d(-50%, -50%, 0); width: 1em; }
}
.countdown {
font-size: 50rem;
width: 1em;
height: 1em;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
animation: container 10s steps(1) infinite;
overflow: hidden;
}
.countdown::before,
.countdown::after {
display: block;
content: '';
box-sizing: border-box;
border: .125em solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
width: 1em;
transform: rotate(45deg);
animation-timing-function: linear;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.countdown::before {
border-color: transparent transparent #00c15e #00c15e;
animation-name: rotate1;
left: 0;
}
.countdown::after {
border-color: #00c15e #00c15e transparent transparent;
animation-delay: 2.5s;
animation-name: rotate2;
right: 0;
}
/* @keyframes container{
25%{
transform: translate3d(0,-50%,0);
width: .5em;
}
50%{
transform: translate3d(-100%,-50%,0);
width: .5em;
}
75%{
transform:translate3d(-50%,-50%,0);
width: 1em;
}
}
@keyframes rotate1{
25%{
left: 0;
transform: rotate(-135deg);
opacity: 1;
}
25.01%{
left: -.5em;
opacity: 0;
}
50%{
left: 0;
opacity: 0;
}
50.1%{
opacity:1 ;
transform: rotate(-135deg);
}
75%{
left: 0;
transform: rotate(-315deg);
}
100%{
transform: rotate(-315deg);
}
}
@keyframes rotate2{
25%{
right: 0;
transform: rotate(-135deg);
opacity: 1;
}
25.01%{
right: -.5em;
opacity: 0;
}
50%{
right: 0;
opacity: 0;
}
50.1%{
opacity:1 ;
transform: rotate(-135deg);
}
75%{
right: 0;
transform: rotate(-315deg);
}
100%{
transform: rotate(-315deg);
}
} */
</style>
</head>
<body>
<div class="countdown"></div>
</body>
</html>
一定要中文？
