css3实现扁平化APP动态时钟特效代码
2015-03-28 09:51作者：zhao
css3扁平化ios动态时钟特效代码是一款扁平化风格的APP时钟动态图标。其外观（表盘，刻度，指针）都是使用css来绘制，然后再通过javascript来获取当前时间并且让时钟动起来。
css(代码)
html, body {
height: 100%;
background: #ffd740;
position: relative;
}
.icon-large {
width: 220px;
height: 220px;
border-radius: 38px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.icon-clock {
overflow: hidden;
background: #000;
}
.clock {
width: 192px;
height: 192px;
border-radius: 50%;
background: #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.clock ol {
list-style-type: none;
width: 100%;
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
.clock ol li {
counter-increment: labelCounter;
position: absolute;
font-size: 1.25em;
}
.clock ol li:before {
font-family: 'Helvetica';
content: counter(labelCounter) "";
}
.clock ol li:nth-child(1) {
right: 55px;
top: 20px;
}
.clock ol li:nth-child(2) {
right: 25px;
top: 50px;
}
.clock ol li:nth-child(3) {
right: 12px;
top: 85px;
}
.clock ol li:nth-child(4) {
right: 25px;
top: 125px;
}
.clock ol li:nth-child(5) {
right: 55px;
top: 150px;
}
.clock ol li:nth-child(6) {
right: 90px;
top: 160px;
}
.clock ol li:nth-child(7) {
right: 125px;
top: 150px;
}
.clock ol li:nth-child(8) {
right: 155px;
top: 125px;
}
.clock ol li:nth-child(9) {
right: 165px;
top: 85px;
}
.clock ol li:nth-child(10) {
right: 150px;
top: 50px;
}
.clock ol li:nth-child(11) {
right: 120px;
top: 20px;
}
.clock ol li:nth-child(12) {
right: 85px;
top: 10px;
}
@
-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#hour {
width: 14px;
height: 14px;
border-radius: 50%;
background: #303030;
position: absolute;
top: 50%;
left: 50%;
margin-top: -7px;
margin-left: -7px;
}
#hour:before, #hour:after {
content: "";
display: block;
position: absolute;
}
#hour:before {
width: 8px;
height: 65px;
border-radius: 4px;
background: #303030;
position: absolute;
bottom: 2px;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#
min {
width: 0;
height: 0;
border-radius: 50%;
background: #303030;
position: absolute;
top: 50%;
left: 50%;
}
#min:before, #min:after {
content: "";
display: block;
position: absolute;
}
#min:before {
width: 6px;
height: 90px;
border-radius: 4px;
background: #303030;
position: absolute;
bottom: 2px;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#
sec {
width: 4px;
height: 4px;
border-radius: 50%;
background: #dd3e1c;
border: 2px solid #e13e1b;
position: absolute;
top: 50%;
left: 50%;
margin-top: -4px;
margin-left: -4px;
}
#sec:before, #sec:after {
content: "";
display: block;
position: absolute;
}
#sec:before {
width: 2px;
height: 105px;
border-radius: 4px;
background: #e13e1b;
position: absolute;
bottom: -12px;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
Html(代码)
<body>
<!-- 代码 开始 -->
<div class="icon-large icon-clock">
<div class="clock">
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
</div>
</div>
<!-- 代码 结束 -->