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

JaveScript 之 即时钟表

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

JaveScript 之 即时钟表

时钟

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



    
 
 
    
    
 #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.mshxw.com
本文地址:https://www.mshxw.com/it/243473.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号