android 倒计时圈圈,CSS3 圆圈状倒计时器

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

div > div {

width: 280px;

height: 280px;

background: none;

-webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%, 50% 50%, 50% 0%);

border-radius: 50%;

-webkit-box-shadow: inset 0px 0px 0px 40px rgba(255, 150, 0, 0.8);

}

@-webkit-keyframes idea {

12.5% {

-webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%, 0% 0%, 50% 50%, 50% 0%);

}

25% {

-webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 50%, 0% 50%, 50% 50%, 50% 0%);

}

37.5% {

-webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 100%, 0% 100%, 50% 50%, 50% 0%);

}

50% {

-webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 50% 100%, 50% 100%, 50% 50%, 50% 0%);

}

62.5% {

-webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 50%, 50% 0%);

}

75% {

-webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 50% 50%, 50% 0%);

}

87.5% {

-webkit-clip-path: polygon(100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 50% 50%, 50% 0%);

}

100% {

-webkit-clip-path: polygon(100% 0%, 100% 0%, 100% 0%, 100% 0%, 50% 0%, 50% 50%, 50% 0%);

}

}

@-keyframes idea {

12.5% {

-moz-clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%, 0% 0%, 50% 50%, 50% 0%);

}

25% {

-moz-clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 50%, 0% 50%, 50% 50%, 50% 0%);

}

37.5% {

-moz-clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 100%, 0% 100%, 50% 50%, 50% 0%);

}

50% {

-moz-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 50% 100%, 50% 100%, 50% 50%, 50% 0%);

}

62.5% {

-moz-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 50%, 50% 0%);

}

75% {

-moz-clip-path: polygon(100% 0%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 50% 50%, 50% 0%);

}

87.5% {

-moz-clip-path: polygon(100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 50% 50%, 50% 0%);

}

100% {

-moz-clip-path: polygon(100% 0%, 100% 0%, 100% 0%, 100% 0%, 50% 0%, 50% 50%, 50% 0%);

}

}

.anim.hours {

-webkit-animation: idea 3600s infinite linear;

-moz-animation: idea 3600s infinite linear;

}

.anim.mins {

-webkit-animation: idea 60s infinite linear;

/* Center the demo */

-moz-animation: idea 60s infinite linear;

}

html,

body {

height: 100vh;

background: url(http://www.sealions.org.uk/sealion.jpg);

}

.center {

text-align: center;

height: 100%;

}

.center:before {

content: '';

display: inline-block;

height: 100%;

vertical-align: middle;

margin-right: -0.25em;

}

.center > * {

display: inline-block;

vertical-align: middle;

}