栏目分类:
子分类:
返回
终身学习网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
终身学习网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

JaveScript 之 即时钟表

CSS教程 更新时间:发布时间: 百科书网 趣学号
时钟

自己刚做的时钟,有兴趣的可以看看



    
 
 
    
    
 #wrap{
     width: 240px;
     height: 240px;
     border-radius: 120px;
     background: cyan;
     margin: 50px auto;
     position: relative;
 }
 #clock{
     width: 200px;
     height: 200px;
     border-radius: 50%;
     background: white;
     position: absolute;
     left: 20px;
     top: 20px;
 }
 #bNumber{
     width: 100%;
     height: 100%;
     position: relative;
 }
 #bNumber div{
     width: 190px;
     height: 20px;
     position: absolute;
     left: 10px;
     top:90px;
 }
 #bNumber span{
     display: block;
     width: 20px;
     height: 20px;
 }
 .number{
     position: absolute;
     bottom:100px;
     transform-origin: 50% 90%;
 }
 #hour{
     width: 5px;
     height: 60px;
     left:100px;
     background: black;
 }
 #minute{
     width: 3px;
     height: 80px;
     left: 101px;
     background: gray;
 }
 #second{
     width: 1px;
     height: 90px;
     left: 102px;
     background: red;
 }
    
    
 
 
     
     
  
  
      9
      10
      11
      12
      1
      2
      3
      4
      5
      6
      7
      8
  
  
  
  
  
  
  
     
 
    
    

转载请注明:文章转载自 www.051e.com
本文地址:http://www.051e.com/it/243473.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 ©2023-2025 051e.com

ICP备案号:京ICP备12030808号