时钟 css3

原创 2016年08月30日 19:30:26
  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  #wrap{width: 200px;height: 200px;border: 10px solid black;border-radius: 50%;position: relative;}
  #kedu{width: 200px;height: 200px;position: relative;}
  #kedu div{width: 20px;height: 100px;position: absolute;
  transform-origin: bottom center;
  }
  span{display: block;text-align: center;}
  #hour{width: 8px;height: 50px;background: black;position: absolute;left:100px;top: 50px;
  transform-origin: bottom center;}
  #min{width: 6px;height: 70px;background: cyan;position: absolute;left:100px;top: 30px;
  transform-origin: bottom center;}
  #second{width: 4px;height: 90px;background: pink;position: absolute;left:100px;top: 10px;
  transform-origin: bottom center;}
  </style>
  </head>
  <body>
  <div id="wrap">
  <div id="kedu">
  <div><span>12</span></div>
  <div><span>1</span></div>
  <div><span>2</span></div>
  <div><span>3</span></div>
  <div><span>4</span></div>
  <div><span>5</span></div>
  <div><span>6</span></div>
  <div><span>7</span></div>
  <div><span>8</span></div>
  <div><span>9</span></div>
  <div><span>10</span></div>
  <div><span>11</span></div>
  </div>
  <div id="hour"></div>
  <div id="min"></div>
  <div id="second"></div>
  </div>
  </body>
  <script type="text/javascript">
  var kedu = document.getElementById('kedu');
  var kedus = kedu.getElementsByTagName('div');
  var spans = document.querySelectorAll('span');
  var hourDiv = document.getElementById('hour');
  var minDiv = document.getElementById('min');
  var secondDiv = document.getElementById('second');
  for (var i = 0; i < kedus.length; i++) {
  kedus[i].style.transform = 'translateX(90px) rotateZ('+ i*30 +'deg)';
  spans[i].style.transform = 'rotateZ('+ -i*30 +'deg)';
  }
   
  function setPointers(){
  //获取当前的小时
  var newDate = new Date();
  var hour = newDate.getHours()%12;
  var min = newDate.getMinutes();
  hourDiv.style.transform = 'rotateZ('+ (hour*30+min*0.5) +'deg)';
   
  //获取当前的分钟设置给指针
  minDiv.style.transform = 'rotateZ('+ min*6 +'deg)';
   
  //获取当前的秒数设置给指针
  var second = newDate.getSeconds();
  secondDiv.style.transform = 'rotateZ('+ second*6 +'deg)';
  }
  setPointers();
   
   
  setInterval(function(){
  setPointers();
  },1000);
   
   
  </script>
  </html>

CSS3圆形时钟代码

  • 2017年08月23日 12:49
  • 2KB
  • 下载

jquery+css3 时钟

  • 2015年08月17日 10:04
  • 4KB
  • 下载

纯css3实现圆盘时钟动画效果

先让我们来看下整体效果,请看下图:作为小白的我,看到别人写的钟表特效有点心动,于是自己也动手写了一个,主要是为了练练脑子,接下来直接看代码:html: css样式:.t2{ width: 100%;...
  • mhlghy
  • mhlghy
  • 2017年04月06日 11:07
  • 226

jquery+css3时钟

  • 2013年12月26日 14:32
  • 1.87MB
  • 下载

jquery版时钟(css3实现)

  • 2014年06月19日 13:51
  • 686KB
  • 下载

CSS3--利用transform属性制作时钟效果

首先简单总结一下transform这个属性,transform的含义是:改变,使…变形;转换。 transform的常用属性:        1)rotate()  旋转函数 取值度数     ...

分享纯css3实现时钟效果

  • 2013年03月15日 14:31
  • 98KB
  • 下载

CSS3数字时钟

  • 2013年04月17日 09:59
  • 11KB
  • 下载

炫酷时钟(css3+js)

html css *{ margin: 0; padding: 0; ...

CSS3仿安卓时钟demo

  • 2012年10月27日 17:32
  • 4KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:时钟 css3
举报原因:
原因补充:

(最多只允许输入30个字)