时钟小项目

学习参考来源：http://www.sohu.com/a/317302016_120134705
应用要点：

• 圆角
  border-radius: 50%;很好用，就是画圆

• 定位

• 动画
  旋转rotate

自己改进用Flex布局写的：

<div class="clock">
 <div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
  <div class="line4"></div>
<div class="line5"></div>
<div class="line6"></div>
  <div class="div4">
</div>
</div>

*{margin:0px;}
.clock{/*时钟的大小布局*/
  background-color:pink;
  height:150px;
  width:150px;
  border-radius:50%;
 display:flex;
  justify-content:center;
  align-items:center;
margin-top:0%;
 margin-left:10%;  }

 .clock div:nth-child(-n+6) {/*有动画调整的部分放在前面先做，很重要！！若果之前有图形，每次变动过都会影响整体，影响判断。批量产出6个时钟直径，后面通过遮盖露出短的部分为12个时间
 刻度*/
  width: 2px;
height: 150px;
background-color: #aaa;
   position:absolute;/*以时钟为参照物，调整位置*/
margin-top:0%;
 margin-left:0%;
  }
.clock div:nth-child(1) {
transform: rotate(30deg);}
.clock div:nth-child(2) {
transform: rotate(60deg);}
.clock div:nth-child(3) {
transform: rotate(90deg);
  background-color: #333;}
.clock div:nth-child(4) {
transform: rotate(120deg);}
.clock div:nth-child(5) {
transform: rotate(150deg);}
.clock div:nth-child(6) {
transform: rotate(180deg);
  background-color: #333;
}
.div4{
  background-color:#e0dda0 ;
  height:130px;
  width:130px;
   border-radius:50%;
 
}

小结：

1. 层层嵌套式
2. 先处理有动画的部分很重要，之前先做的中间圆盘,因为占据了一定的位置，后面想调整，不方便。
3. 处理显示图层关系， z-index数值越大，离看者越近，也就是越在上层。在div4中添加了 z-index:2;
4. 

后面画圆心出了问题，在div4内添加一个div，CSS属性正常写，没有独到想要效果。

<div class="div4"> <div class="heart"></div>
</div>

.heart{
  border:solid 1px black ;
  background-color:green ;
  height:10px;
  width:10px;
   border-radius:50%;
}

结果如图：