web前端：钟表组件实现动态时间指针，原生css，js，transform-origin应用

1.less

* {
    margin: 0;
    padding: 0;
    &:hover #wrap {
        background: skyblue;
        color: beige;
    }
    #wrap {
        //absolute: 元素从块级元素-》转化为定位元素，可以自定义高宽（一旦浮动，则为浮动元素）
        position: absolute;
        width: 500px;
        height: 500px;
        background: salmon;
        border: 1px solid;
        border-radius: 50%;
        //居中
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /**
                            这里的-50% =》 margin-left: -250px margin-top: -250px
         */
        transition: 2s;
        //阴影:box-shadow:x-px , y-px ,模糊程度？px #color 
        box-shadow: 2px 2px 5px #4682B4;
        //卡尺
        ul {
            //消默认li样式
            list-style: none;
            li {
                position: absolute;
                width: 6px;
                height: 30px;
                background: beige;
                //总宽度=500px，width=6px,left=247
                left: 247px;
                top: 0;
                //更新基点
                transform-origin: center 250px;
                //分钟height:每5帧+1，5n+1，原生css变量n
                &:nth-child(5n+1) {
                    height: 40px;
                }
            }
        }
        //rgb(255,255,255) 透明opacity--》rgba(255,255,255,0)
        .logo {
            position: absolute;
            width: 500px;
            height: 500px;
            font: 50px/500px "微软雅黑";
            text-align: center;
            top: 15%;
        }
        //时针
        .hour {
            position: absolute;
            //位置left=500-10=490/2=245
            left: 245px;
            //关联height=(500-100)/2=200
            top: 90px;
            width: 10px;
            height: 160px;
            background: steelblue;
            border: 1px solid white;
            transform-origin: center bottom;
        }
        //分针
        .minute {
            position: absolute;
            //位置left=(500-8)/2=246
            left: 246px;
            //关联height=(500-200)/2=150
            top: 70px;
            width: 8px;
            height: 180px;
            background: yellowgreen;
            border: 1px solid white;
            transform-origin: center bottom;
        }
        //秒针
        .second {
            position: absolute;
            //位置left=(500-6)/2=247
            left: 247px;
            //关联height=(500-200)/2=150
            top: 80px;
            width: 6px;
            height: 200px;
            background: red;
            border: 1px solid;
            box-shadow: 1px 1px 5px #000000;
            //transform-origin: center bottom;
            //height距离圆心30px，需要减去
            transform-origin: center 170px;
        }
        //钟座
        .center-top {
            position: absolute;
            //位置left=(500-50)/2=225
            left: 225px;
            //关联height=(500-50)/2=225
            top: 225px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: salmon;
            //降级div
            z-index: -1;
        }
        .center-top2 {
            position: absolute;
            //位置：(500-30-2*2)/2=233
            left: 233px;
            top: 233px;
            width: 30px;
            height: 30px;
            border: 2px solid white;
            border-radius: 50%;
            background: beige;
        }
    }
}

2.css

* {
  margin: 0;
  padding: 0;
}
*:hover #wrap {
  background: skyblue;
  color: beige;
}
* #wrap {
  position: absolute;
  width: 500px;
  height: 500px;
  background: salmon;
  border: 1px solid;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /**
                            这里的-50% =》 margin-left: -250px margin-top: -250px
         */
  transition: 2s;
  box-shadow: 2px 2px 5px #4682B4;
}
* #wrap ul {
  list-style: none;
}
* #wrap ul li {
  position: absolute;
  width: 6px;
  height: 30px;
  background: beige;
  left: 247px;
  top: 0;
  transform-origin: center 250px;
}
* #wrap ul li:nth-child(5n+1) {
  height: 40px;
}
* #wrap .logo {
  position: absolute;
  width: 500px;
  height: 500px;
  font: 50px/500px "微软雅黑";
  text-align: center;
  top: 15%;
}
* #wrap .hour {
  position: absolute;
  left: 245px;
  top: 90px;
  width: 10px;
  height: 160px;
  background: steelblue;
  border: 1px solid white;
  transform-origin: center bottom;
}
* #wrap .minute {
  position: absolute;
  left: 246px;
  top: 70px;
  width: 8px;
  height: 180px;
  background: yellowgreen;
  border: 1px solid white;
  transform-origin: center bottom;
}
* #wrap .second {
  position: absolute;
  left: 247px;
  top: 80px;
  width: 6px;
  height: 200px;
  background: red;
  border: 1px solid;
  box-shadow: 1px 1px 5px #000000;
  transform-origin: center 170px;
}
* #wrap .center-top {
  position: absolute;
  left: 225px;
  top: 225px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: salmon;
  z-index: -1;
}
* #wrap .center-top2 {
  position: absolute;
  left: 233px;
  top: 233px;
  width: 30px;
  height: 30px;
  border: 2px solid white;
  border-radius: 50%;
  background: beige;
}

3.js

window.onload=function(){
	var ulNode=document.querySelector("#wrap > ul");
	var liNode="";
	//创建元素-style样式css
	var liStyleNode=document.createElement("style");
	var liCss="";
	/**
	 * 循环添加li标签
	 * ul > li :nth-child(i+1){
	 * 	transform: rotate((i*6)deg);
	 * }
	 */
	for(var i=0;i<60;i++){
		liNode+="<li></li>";
		//指定li标签样式css
		liCss+="ul > li:nth-child("
		+(i+1)
		+"){transform:rotate("+(i*6)+"deg);}";
	}
	ulNode.innerHTML=liNode;
	liStyleNode.innerHTML+=liCss;
	//加入到document
	document.head.appendChild(liStyleNode);
	
	var hourNode=document.querySelector("#wrap > .hour");
	var minuteNode=document.querySelector("#wrap > .minute");
	var secondNode=document.querySelector("#wrap > .second");
	
	//计时器启动前，move执行时间变换
	move();
	//second-转动
	setInterval(move,1000);
	function move(){
		//获取内置date
		var date=new Date();
		//注意时间计算顺序，优先计算秒
		var second=date.getSeconds();
		var minute=date.getMinutes()+second/60;
		var hour=date.getHours()+minute/60;
		
		//秒：360/60=6
		secondNode.style.transform="rotate("+(6*second)+"deg)";
		//分钟：360/60=6
		minuteNode.style.transform="rotate("+(6*minute)+"deg)";
		//小时：360/12=30
		hourNode.style.transform="rotate("+(30*hour)+"deg)";
	}
}

4.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>时钟表clock</title>
	</head>

	<body>
		<div id="wrap">
			<div class="logo">cevent</div>
			<ul>
				<!--启用js脚本-->
				<!--<li></li>-->
			</ul>
			<div class="hour"></div>
			<div class="minute"></div>
			<div class="second"></div>
			<div class="center-top"></div>
			<div class="center-top2"></div>
		</div>

	</body>
	<link rel="stylesheet" href="css/less025-clock-module.css" />
	<script type="text/javascript" src="js/less025-clock-module.js"></script>

</html>

5.效果图