HTML+CSS3 实现时钟效果（秒针抖动）

原创

于 2019-12-23 21:49:40 发布 · 952 阅读

1 ·

CC 4.0 BY-SA版权

本文通过HTML和CSS3实现了一个动态时钟效果，特别是秒针具有逼真的抖动动画，详细思路在代码注释中进行了解析。

效果如下
思路写在注释里面啦
在这里插入图片描述

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>时钟</title>
  <style>
    .box {
   
   
      margin: 100px auto;
      width: 300px;
      height: 300px;
      border: 10px solid #cccccc;
      position: relative;
    }

    .box .cir {
   
   
      width: 15px;
      height: 15px;
      background-color: #ccc;
    }

    .box>.line {
   
   
      height: 300px;
      width: 10px;
      position: absolute;
      background-color: #cccccc;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    /* 指定刻度线的位置 */
    .box>.line2 {
   
   
      width: 7px;
      transform: translate(-50%, -50%) rotateZ