css制作自动旋转的钟表

最新推荐文章于 2023-01-05 09:27:04 发布

前端61

最新推荐文章于 2023-01-05 09:27:04 发布

阅读量449

点赞数

分类专栏： H5与C3 文章标签：动画 animation css制作钟表钟表案例 css3

本文链接：https://blog.csdn.net/qq_43327305/article/details/103817836

版权

H5与C3 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1、钟表制作过程

制作最外层圆环
绘制时间刻度（定位+transform）
绘制内表盘(作用：放置钟表最中间，遮挡住时间刻度，只留下部分-达到时间刻度的效果)
绘制表针（时、分、秒）
绘制最内层圆环（表针遮挡层）
分别给时针、分针、秒针添加动画

2、具体代码


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box {
      width: 240px;
      height: 240px;
      margin: 100px auto;
      border: 5px solid #ccc;
      border-radius: 50%;
      position: relative;
    }

    .time {
      width: 4px;
      height: 100%;
      background-color: #ccc;
      position: absolute;
      top: 0;
      left: 118px;
    }

    .two {
      transform: rotate(30deg);
    }

    .three {
      transform: rotate(60deg);
    }

    .four {
      transform: rotate(90deg);
    }

    .five {
      transform: rotate(120deg);
    }

    .six {
      transform: rotate(150deg);
    }

    .mask1 {
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background-color: #fff;
      position: absolute;
      left: 10px;
      top: 10px;
    }

    .hour,
    .min,
    .sec {
      height: 2px;
      position: absolute;
      left: 120px;
      top: 119px;
      transform-origin: 0px 1px;
    }

    .hour {
      width: 60px;
      background-color: green;
      transform: rotate(-90deg);
      animation: hourMove 86400s linear infinite;
    }

    @keyframes hourMove {
      0% {
        transform: rotate(-90deg);
      }

      100% {
        transform: rotate(270deg);
      }
    }

    .min {
      width: 80px;
      background-color: blue;
      transform: rotate(-30deg);
      animation: minMove 3600s linear infinite;
    }

    @keyframes minMove {
      0% {
        transform: rotate(-30deg);
      }

      100% {
        transform: rotate(330deg);
      }
    }

    .sec {
      width: 100px;
      background-color: red;
      animation: secMove 60s linear infinite;
    }

    @keyframes secMove {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .mask2 {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #ccc;
      position: absolute;
      top: 110px;
      left: 110px;
    }
  </style>
</head>

<body>
  <div class="box">
    <!-- 刻度值 -->
    <div class="time one"></div>
    <div class="time two"></div>
    <div class="time three"></div>
    <div class="time four"></div>
    <div class="time five"></div>
    <div class="time six"></div>
    <!-- 内表盘遮挡层 -->
    <div class="mask1"></div>
    <!-- 时针、分针、秒针 -->
    <div class="hour"></div>
    <div class="min"></div>
    <div class="sec"></div>
    <!-- 最内层圆环（表针遮挡层） -->
    <div class="mask2"></div>
  </div>
</body>

</html>

前端进阶精选：点此去

前端61

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css制作自动旋转的钟表

1、钟表制作过程制作最外层圆环绘制时间刻度（定位+transform）绘制内表盘(作用：放置钟表最中间，遮挡住时间刻度，只留下部分-达到时间刻度的效果)绘制表针（时、分、秒）绘制最内层圆环（表针遮挡层）分别给时针、分针、秒针添加动画2、具体代码<!DOCTYPE html><html lang="en"><head> &...
复制链接

扫一扫