持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情

前言：

掘友们，大家晚上好啊，今天在网上找素材的时候，突然看到了一个很好看的西瓜时钟，而且，这个是时钟还是跟着时间不断地更新的，就很酷。于是，小编在这里就使用CSS简单的将西瓜闹钟绘制了出来，废话不多说，大家看示例！

示例：

怎么样，掘友们，看到这个西瓜闹钟，有没有流口水的冲动。哈哈哈哈。

代码实现：

CSS

        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        body,
        html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .item {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 70vmin;
            height: 70vmin;
            border-radius: 50%;
            position: relative;
            background: radial-gradient(ellipse at center, #ec7277, #ec7277 60%, #e1ecde calc(60% + 1px), #e1ecde 63%, #079554 calc(63% + 1px), #079554 68%, #056e3e calc(68% + 1px));
            box-shadow: -0.3vmin -0.3vmin 0.1vmin #e1ecde, 3vmin 3vmin 0.1vmin #44a7ac;
        }

        .item:after {
            content: '';
            display: block;
            width: 3.5vmin;
            height: 3.5vmin;
            border-radius: 50%;
            background-color: #f8ccce;
            position: absolute;
        }

        .dot {
            width: 85%;
            height: 85%;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
        }

        .item-dot {
            display: block;
            height: 3.5vmin;
            width: 2vmin;
            background-color: #e32f36;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .item-dots {
            display: block;
            height: 3.5vmin;
            width: 2vmin;
            background-color: #000;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .pointer {
            height: 80%;
            width: 80%;
            position: absolute;
        }

        .pointer-item {
            height: 10%;
            width: 2.4%;
            border-radius: 1vmin;
            background-color: #c41a21;
            position: absolute;
        }

        .pointer-item-top {
            top: 0;
            left: 48.8%;
        }

        .pointer-item-left {
            left: 3%;
            top: 45%;
            transform: rotate(90deg);
        }

        .pointer-item-right {
            right: 3%;
            top: 45%;
            transform: rotate(90deg);
        }

        .pointer-item-bottum {
            left: 48.8%;
            bottom: 0;
        }

        .time-item {
            position: absolute;
            bottom: 50%;
            border-radius: 1vmin;
            transform-origin: 50% 100%;
            transform: rotate(0);
        }

        .m {
            height: 40%;
            width: 3%;
            left: 48.8%;
            background-color: #a0161b;
        }

        .h {
            height: 27%;
            width: 2.4%;
            left: 48.8%;
            background-color: #6f0f13;
        }

        .s {
            height: 50%;
            width: 1%;
            left: 49.5%;
            bottom: 40%;
            transform-origin: 50% 80%;
            background-color: #f8ccce;
        }

HTML

<div id="box">
        <div class="item">
            <div class="dot">
                <div class="item-dot"></div>
                <div class="item-dot"></div>
                <div class="item-dot"></div>
                <div class="item-dot"></div>
                <div class="item-dot"></div>
                <div class="item-dot"></div>
                <div class="item-dot"></div>
                <div class="item-dot"></div>
                <div class="item-dot"></div>
                <div class="item-dot"></div>
                <div class="item-dot"></div>
                <div class="item-dot"></div>
                <div class="item-dot"></div>
                <div class="item-dot"></div>
                <div class="item-dots"></div>
                <div class="item-dots"></div>
                <div class="item-dots"></div>
                <div class="item-dots"></div>
                <div class="item-dots"></div>
                <div class="item-dots"></div>
            </div>
            <div class="pointer">
                <div class="pointer-item pointer-item-top"></div>
                <div class="pointer-item pointer-item-left"></div>
                <div class="pointer-item pointer-item-right"></div>
                <div class="pointer-item pointer-item-bottum"></div>
            </div>
            <div class="time">
                <div class="m time-item"></div>
                <div class="h time-item"></div>
                <div class="s time-item"></div>
            </div>
        </div>
    </div>

JS

js方法设置了Math.round设置了随机数，用来渲染西瓜表面的遮罩层，和瓜子。通过计时器不断的让秒针顺时针旋转。

        var itemDot = document.getElementsByClassName('item-dot')
        var itemDots = document.getElementsByClassName('item-dots')
        for (let i = 0; i < itemDot.length; i++) {
            itemDot[i].style.top = Math.round(Math.random() * 100) + '%';
            itemDot[i].style.left = Math.round(Math.random() * 100) + '%';
        }
        for (let i = 0; i < itemDots.length; i++) {
            itemDots[i].style.top = Math.round(Math.random() * 100) + '%';
            itemDots[i].style.left = Math.round(Math.random() * 100) + '%';
        }
        const sHand = document.querySelector('.s');
        const mHand = document.querySelector('.m');
        const hHand = document.querySelector('.h');

        function setTime() {
            const d = new Date();
            const s = d.getSeconds();
            const m = d.getMinutes();
            const h = d.getHours();

            const sDeg = ((s / 60) * 360);
            const mDeg = ((m / 60) * 360);
            const hDeg = ((h / 12) * 360);

            sHand.style.transform = `rotate( ${sDeg}deg )`;
            mHand.style.transform = `rotate( ${mDeg}deg )`;
            hHand.style.transform = `rotate( ${hDeg}deg )`;
        }

        setInterval(setTime, 1000);

总结：

整体来说，这个西瓜时钟是比较简单的，是一个小案例。可以应用到项目中。