[分享]css3彩色时钟特效代码

CSS3彩色时钟特效是一种非常酷炫的特效，使用CSS3技术来实现。以下是一个简单的CSS3彩色时钟特效的代码：/设置时钟样式/ .clock{ : relative; width: 200px; he...

CSS3彩色时钟特效是一种非常酷炫的特效，使用CSS3技术来实现。以下是一个简单的CSS3彩色时钟特效的代码：

/*设置时钟样式*/
.clock{
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 50px auto;
  background-color: #f1f1f1;
  box-shadow: inset 0px -3px 0px rgba(0,0,0,0.1);
}
/*设置时钟的表盘*/
.clock .face{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
/*设置小时刻度*/
.clock .hour{
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px;
  height: 30px;
  background-color: #FFCC33;
  border-radius: 3px;
  transform-origin: 50% 100%;
}
/*设置分钟刻度*/
.clock .minute{
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 20px;
  background-color: #33CCCC;
  border-radius: 3px;
  transform-origin: 50% 100%;
}
/*设置秒钟刻度*/
.clock .second{
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 10px;
  background-color: #66FF99;
  border-radius: 3px;
  transform-origin: 50% 100%;
}
/*设置指针*/
.clock .hand{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: red;
  transform-origin: 0 0;
  z-index: 999;
}
/*设置时钟中心的小圆点*/
.clock .dot{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #FF3366;
  margin:-6px 0 0 -6px;
  z-index: 99;
} 

上述代码中，我们首先设置了时钟的样式，包括尺寸、圆角和背景色等；然后我们设置了时钟的表盘，采用了一个绝对定位充满整个时钟的元素，并将其旋转了-90度，这样时钟就变成了一个标准的12点钟样式；接着我们设置了小时、分钟、秒钟和指针的样式，包括尺寸、颜色和旋转等，这里我们采用了旋转变换来实现指针的转动效果。