JS特效——时钟轮盘

JS特效——时钟轮盘

一、制作思路

首先，先定义时分秒年月日的盒子，之后空着他，用JS创作元素，并且将元素添加到相应的盒子中，最后定义旋转的函数，定义好后，将函数放置到定时器中，定时一秒。

二、制作步骤

首先定义相应的盒子

<div class="secondBox"></div>
    <div class="minuteBox"></div>
    <div class="hourBox"></div>
    <div class="dayBox"></div>
    <div class="mounthBox"></div>
    <div class="yearBox"></div>

为盒子渲染出自己喜欢的样式

 body {
   
   
            font-size: 0px;
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #cad6dd;
            overflow: hidden;
            background-color: #141929;
        }

        .NowData {
   
   
            background-image: -webkit-linear-gradient(bottom, rgb(255 0 0), rgb(120 8 220));
            background-size: 100% 20px;
            /* 以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉。 */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .yearBox {
   
   
            height: 10vh;
            width: 10vh;
            position: absolute;
            display: flex;
            font-size: 16px;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: 1s;
            background-image: -webkit-linear-gradient(bottom, rgb(255 0 0), rgb(120 8 220));
            background-size: 100% 20px;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .mounthBox {
   
   
            height: 25vh;
            width: 25vh;
            position: absolute;
            display: flex;
            align-items: center;
            border-radius: 50%;
            transition: 1s;
        }

        .dayBox {
   
   
            height: 40vh;
            width: 40vh;
            border-radius: 50%;
            display: flex;
            align-items: center;
            position: absolute;
            transition: 1s;
        }

        .hourBox {
   
   
            height: 55vh;
            width: 55vh;
            position: absolute;
            display: flex;
            align-items: center;
            transition: 1s;
            border-radius: 50%;
        }

        .minuteBox {
   
   
            height: 70vh;
            width: 70vh;
            position: absolute;
            display: flex;
            align-items: center;
            border-radius: 50%;
            transition: 1s;
        }

        .secondBox {
   
   
            height: 85vh;
            width: 85vh;
            display: flex;
            align-items: center;
            position: absolute