欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

时钟小项目

程序员文章站 2022-04-24 12:47:44
...

学习参考来源: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%;
}

结果如图:
时钟小项目

相关标签: 知识点总结