时钟 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实现转动时钟案例

使用纯CSS3属性来实现转动时钟 .box { width: 200px; height: 200...
  • k491022087
  • k491022087
  • 2017年01月10日 23:55
  • 1024

css3画一个运动的钟表

思路如下 1.定义一个盒子,然后通过border-radius变为圆 2.画6条线,然后通过定位,把这6条线设置到大盒子里,作为钟表刻度 3.画一个小圆,通过定位将中间部分的线条遮住 ...
  • qq545698514
  • qq545698514
  • 2016年12月13日 16:00
  • 873

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

首先简单总结一下transform这个属性,transform的含义是:改变,使…变形;转换。 transform的常用属性:        1)rotate()  旋转函数 取值度数     ...
  • u010297791
  • u010297791
  • 2017年01月11日 10:24
  • 1092

css3实现时钟动画

用css3实现 时钟动画,背景是4张图片,做成时钟效果 效果图: 其中上面包括4张透明图:圆圈(90*90),时(30*30),分(30*30),秒(30*30) htm...
  • l863784757
  • l863784757
  • 2015年06月19日 13:54
  • 1310

【CSS3】纯CSS代码实现模拟时钟,+js对时功能。

使用CSS3纯代码来实现模拟时钟,及指针动画功能。 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形;表盘 Transform:变换,旋转,扭曲;刻度盘,指针形状...
  • rtian001
  • rtian001
  • 2015年09月23日 18:53
  • 1282

HTMl5与CSS3两种制作时钟的方法

1.      今天用canvas做了一个时钟,想起之前用JS也做过一个,所以把两个的代码个贴上来。 代码如下:                                 ...
  • CharlesK6
  • CharlesK6
  • 2017年06月14日 22:29
  • 243

CSS3时钟

时钟 body{} ul{list-style: none;} h1{text-align: cente
  • lanbinghan2016
  • lanbinghan2016
  • 2016年04月28日 14:04
  • 217

css3时钟

css3时钟
  • j578875873
  • j578875873
  • 2016年01月11日 10:52
  • 208

css3+js 实现时钟效果

css3+js 实现时钟效果
  • magic_wings
  • magic_wings
  • 2016年10月04日 21:11
  • 1107

纯CSS3时钟

一、效果欣赏 纯css3打造精美时钟效果,效果如下图所示,也可看看----demo----- 二、难点解析 单独位数数字动画 动画状态的控制 三、实现步骤 1.html架构 ...
  • whqet
  • whqet
  • 2013年05月07日 13:44
  • 2172
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:时钟 css3
举报原因:
原因补充:

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