您的位置：首页 > Web前端 > CSS

CSS3--利用transform属性制作时钟效果

2017-01-11 10:24 585 查看

首先简单总结一下transform这个属性，transform的含义是：改变，使…变形；转换。

transform的常用属性：

1）rotate() 旋转函数取值度数

deg 度数

Transform-origin 旋转的基点

2）skew() 倾斜函数取值度数

skewX()

skewY()

3）scale() 缩放函数取值正数、负数和小数

scaleX()

scaleY()

4）translate() 位移函数

translateX()

translateY()

注意：Transform 执行顺序问题 — 后写先执行。

案例说明：

实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟</title>
<style id="css">
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
.box{
width: 200px;
height:200px;
margin:100px auto;
border:2px solid #000;
border-radius: 50%;
position: relative;
background: url("images/bg.jpg") no-repeat;/*为了好看，我添加了一个背景*/
background-size:100% 100%;
}
.box ul{
height: 200px;
position: relative;
}
.box ul li{
width: 2px;
height:6px;
background-color: #000;
position: absolute;
left: 99px;
top:0px;
-webkit-transform-origin: center 100px; /*旋转基点*/
}
.box ul li:nth-of-type(5n+1){height: 12px}
#hour{
width: 4px;
height: 45px;
position: absolute;
left: 98px;
top:55px;
background-color: #000;
-webkit-transform-origin: bottom;
}
#min{
width: 2px;
height: 60px;
position: absolute;
left:99px;
top:40px;
background-color: #999;
-webkit-transform-origin: bottom;
-webkit-transform: rotate(60deg);
}
#sec{
width: 2px;
height: 75px;
position: absolute;
left:99px;
top:25px;
background-color: #ff2834;
-webkit-transform-origin: bottom;
-webkit-transform: rotate(36deg);
}
#circle{
width: 16px;
height: 16px;
position: absolute;
left:92px;
top:92px;
background-color: #000;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">
<ul id="timeList"></ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div id="circle"></div>
</div>
</body>
<script>
window.onload=function(){
var oCss = document.getElementById("css");
var oList = document.getElementById("timeList");
var oHour = document.getElementById("hour");
var oMIn = document.getElementById("min");
var oSec = document.getElementById("sec");

addList();
addTime();
setInterval(function () {
addTime();
},1000);
//添加时钟的刻度
function addList(){
var aLi ="";
var sCss="";
for (var i = 0; i < 60; i ++){
sCss +=".box ul li:nth-of-type("+(i+1)+"){-webkit-transform: rotate("+i*6+"deg);}";
aLi +="<li></li>";
}
oList.innerHTML=aLi;
oCss.innerHTML+=sCss;
};
//获取时针、分针、秒针的度数
function addTime(){
var oDate = new Date();
var iSec = oDate.getSeconds();
var iMin = oDate.getMinutes()+iSec/60;
var iHour = (oDate.getHours()%12)+iMin/60;

oSec.style.webkitTransform="rotate("+(iSec*360/60)+"deg)";
oMIn.style.webkitTransform="rotate("+(iMin*360/60)+"deg)";
oHour.style.webkitTransform="rotate("+(iHour*360/12)+"deg)";
}
};
</script>
</html>说明：
1、时针的度数等于小时+当时的分钟，小时必须转化为12小时制，然后计算度数；
分针的度数等于分钟+当时的秒数，分针必须转化为60分钟制，然后计算度数；
秒针的度数等于当时的秒，秒针必须转化为60秒制，然后计算度数；
具体实现：
var iSec = oDate.getSeconds();

var iMin = oDate.getMinutes()+iSec/60;

var iHour = (oDate.getHours()%12)+iMin/60;
度数转化：

oSec.style.webkitTransform="rotate("+(iSec*360/60)+"deg)";

oMIn.style.webkitTransform="rotate("+(iMin*360/60)+"deg)";

oHour.style.webkitTransform="rotate("+(iHour*360/12)+"deg)";

2、时针、分针和秒针如何运动，即随着时间的变化而移动
此时需要一个setInterval()函数，这个函数可以设定在一定的时间内去调用函数，那么就可以实时获取时间，即可以实现时针、分针和秒针移动的效果。
3、图中刻度的设计同样用到了transform这个属性，要注意设置Transform-origin 旋转的基点。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航