CSS绘制时钟

作者: 若年 | 来源:发表于2020-06-12 17:16 被阅读0次

CSS绘制时钟
css绘制三角形和对号
canvas绘制时钟
canvas绘制时钟
CSS绘制网格背景
使用canvas绘制时钟
CSS-绘制各种基本图形
canvas时钟面向对象方法
时钟的绘制---canvas
Canvas绘制时钟效果

效果图：

时钟.gif

解析:
1.利用transform: rotate(60deg);旋转实现刻度和指针
2.hover时添加旋转动画

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #9dbac4;
        }

        main {
            position: relative;
            width: 400px;
            height: 400px;
            background: #3d71af;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(130, 195, 230, 0.7);
        }

        main::before {
            position: absolute;
            left: 0;
            top: 0;
            content: '';
            width: 100%;
            height: 100%;
            border-radius: 50%;
            transform: scale(1.1);
            background: radial-gradient(at center, #ffbec1 20%, #edb547, #51c6dc, #a3ed8c,#d993ff);
            z-index: -1;
        }

        main .line>div {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 10px;
            height: 95%;
            background: #abd3ff;
        }

        main .line>div:nth-child(1) {
            transform: translate(-50%, -50%) rotate(0deg);
        }

        main .line>div:nth-child(2) {
            transform: translate(-50%, -50%) rotate(30deg);
        }

        main .line>div:nth-child(3) {
            transform: translate(-50%, -50%) rotate(60deg);
        }

        main .line>div:nth-child(4) {
            transform: translate(-50%, -50%) rotate(90deg);
        }

        main .line>div:nth-child(5) {
            transform: translate(-50%, -50%) rotate(120deg);
        }

        main .line>div:nth-child(6) {
            transform: translate(-50%, -50%) rotate(150deg);
        }

        main>div[class="mark"] {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0%;
            top: 0%;
            background: #3d71af;
            border-radius: 50%;
            transform: scale(.8);
        }

        main>.point {
            width: 20px;
            height: 20px;
            background: #e7e587;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
        }

        main .hour {
            width: 9px;
            position: absolute;
            height: 25%;
            background: #e2a381;
            left: 50%;
            bottom: 50%;
            transform: translate(-50%, 0);
            border-radius: 10px;
        }

        main .minute {
            width: 6px;
            position: absolute;
            height: 35%;
            background: #bcdb82;
            left: 50%;
            bottom: 50%;
            transform-origin: left bottom;
            transform: translate(-50%, 0) rotate(60deg);
            border-radius: 10px;
        }

        main .second {
            width: 2px;
            position: absolute;
            height: 35%;
            background: #9bf1ec;
            left: 50%;
            bottom: 50%;
            transform-origin: left bottom;
            transform: translate(-50%, 0) rotate(90deg);
            border-radius: 3px;
        }

        main:hover .second {
            transition: 10s;
            transform: rotate(260deg);
        }

        main .text {
            font-size: 1.2em;
            color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, 20px);
            text-transform: uppercase;
            opacity: .5;
            text-align: center;
        }
    </style>
</head>
<body>
<main>
    <section class="line">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <div class="mark"></div>
    <div class="point"></div>
    <div class="hour"></div>
    <div class="minute"></div>
    <div class="second"></div>
    <div class="text">
        <br>
        css时钟
    </div>
</main>
</body>
</html>