码迷,mamicode.com
首页 > Web开发 > 详细

简单时钟——css3

时间:2016-06-20 22:07:58      阅读:689      评论:0      收藏:0      [点我收藏+]

标签:

这里我们使用css3的特性制作一个简易的时钟,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.clock{
position: relative;
background: url(../img/ios_clock.svg) no-repeat center;
width: 300px;
height: 300px;
}
.clock::after{
content: "";
width: 10px;
height: 10px;
background:red;
position: absolute;
left: 150px;
top: 150px;
transform: translateX(-50%) translateY(-50%);
border-radius: 50%;

}

.hour{
width: 10px;
height: 60px;
background: deepskyblue;
position: absolute;
left: 145px;
top:90px;
transform-origin: 50% 100%;
animation: cycle 43200 linear infinite;
}

.minute{
width: 8px;
height: 80px;
background: red;
position: absolute;
left: 146px;
top: 70px;
transform-origin: 50% 100%;
animation: cycle 3600s linear infinite;
}

.second{
width: 4px;
height: 120px;
background: purple;
position: absolute;
left: 148px;
top: 50px;
transform-origin: 50% 80%;
animation: cycle 60s linear infinite;

}

@keyframes cycle{
100%{
transform: rotateZ(360deg);
}
}

.bb{position: absolute;
top: 400px;}
</style>
</head>
<body>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
<div id="bb">ssss</div>
<script>
window.onload=function(){
var day = new Date();
var hour=day.getHours()
var minute=day.getMinutes();
var second=day.getSeconds();

var second1=second*6;
var minute1=minute*6+second*0.5
var hour1=(hour%12)*30+minute*0.5

var bb=document.getElementById("bb");
bb.innerHTML=hour1+" "+minute1+" "+second1
//

var h=document.getElementsByClassName("hour")
var m=document.getElementsByClassName("minute")
var s=document.getElementsByClassName("second")
h[0].style.transform=‘rotateZ(‘+hour1+‘deg)‘
m[0].style.transform=‘rotateZ(‘+minute1+‘deg)‘
s[0].style.transform=‘rotateZ(‘+second1+‘deg)‘


}

</script>
</body>
</html>

 

除了时钟的圆盘是背景图片之外,其他的没有问题。大致看上去也还可以,有强迫症的朋友可以自己用cavas自己画一个。

简单时钟——css3

标签:

原文地址:http://www.cnblogs.com/thestudy/p/5601791.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!