前端练习--钟表运动效果

comegoing-归去兮来

已于 2023-12-06 15:49:06 修改

阅读量457

点赞数

分类专栏：前端基础练习文章标签： html5 css3 前端 css 动画

于 2022-09-02 15:19:57 首次发布

本文链接：https://blog.csdn.net/comegoing_xin_lv/article/details/126663545

版权

前端基础练习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、效果展示

二、原理

1、背景

（1）实际上，钟表一个div，时针分针秒针都有一个div背景，只是没有显示

（2）用一个div作为钟表的盒子，加入背景图片，并用border-radius设置为圆形

（3）每个指针需要一个div作为背景

（4）将时针分针秒针作为div的子元素，让他们在盒子中居中，并且长度只占50%

2、指针旋转

（1）实际上指针没有添加动画效果进行旋转，因为如果对指针进行旋转，则是以指针中心点为圆心进行旋转

（2）旋转体实际上是指针的背景，因为div旋转，中心点在正放心盒子中心，而指针只占大小的一半，则会有上面的效果，我说的就是下面这样

（3）用keyframes加上旋转效果就可以了，只要把每个指针的div设置与现实相同的时间运动就可以了

三、代码（背景图来自本地，请自行下载）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>钟表</title>
    <style>
      @keyframes clock {
        from {
          transform: rotateZ(0deg);
        }
        to {
          transform: rotateZ(360deg);
        }
      }
      html {
        perspective: 800px;
      }
      body {
        perspective: 800px;
      }
      .clock {
        margin: 0 auto;
        background-image: url("../src/img_exercise/clock.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: -4px 0px;
        height: 500px;
        width: 500px;
        border-radius: 50%;
        position: relative;
      }
      .clock > div {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
      .hour-box {
        height: 45%;
        width: 45%;
        animation: clock 21600s infinite linear;
        
      }
      .hour {
        height: 50%;
        width: 8px;
        background-color: black;
        margin: 0px auto;
        border-radius: 50%;
      }
      .min-box {
        width: 70%;
        height: 70%;
        animation: clock 3600s infinite linear;
      }
      .min {
        height: 50%;
        width: 6px;
        margin: 0 auto;
        background-color: black;
        border-radius: 50%;
      }
      .sec-box {
        width: 90%;
        height: 90%;
        animation: clock 60s infinite linear ;
      }
      .sec {
        height: 50%;
        width: 2px;
        background-color: black;
        margin: 0 auto;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <!-- 钟表主体 -->
    <div class="clock">
      <!-- 小时 -->
      <div class="hour-box">
        <div class="hour"></div>
      </div>
      <!-- 分 -->
      <div class="min-box">
        <div class="min"></div>
      </div>
      <!-- 秒 -->
      <div class="sec-box">
        <div class="sec"></div>
      </div>
    </div>
  </body>
</html>