倒计时

作者: debt | 来源:发表于2016-09-18 20:36 被阅读7次

倒计时
倒计时不仅使我们焦躁，还可以使我们振奋啊
倒计时
wordlist 13
wordlist 11
van-count-down 倒计时相关问题
iOS开发-倒计时
10.27
1小时倒计时
js中date倒计时

<!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>

一定要中文？