CSS3 用animation画一个钟～

闹钟的效果如下

dom

        <div class="clock">
            <div class="hour"></div>
            <div class="minute"></div>
            <div class="second"></div>
            <div class="point"></div>
        </div>

css

<style>
        @keyframes tik{
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
        .clock {
            border: 10px solid rgb(116, 78, 68);
            position: relative;
            height: 200px;
            width: 200px;
            border-radius: 50%;
            background: #eee;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .hour{
            position: relative;
            right: 30px;
            transform-origin: right  center;
            animation: tik steps(60) 216000s infinite;
            height: 4px;
            width: 60px;
            background: rgb(211, 60, 23);
        }
        .minute {
            position: absolute;
            top: 20px;
            transform-origin: center bottom;
            animation: tik steps(60) 3600s infinite;
            height: 80px;
            width: 4px;
            background: rgb(50, 189, 159);
        }
        .second {
            position: absolute;
            top: 0px;
            transform-origin: center bottom;
            animation: tik steps(60) 60s infinite;
            height: 100px;
            width: 4px;
            background: rgb(61, 55, 55);
        }
        .point{
            border-radius: 50px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 10px;
            height: 10px;
            background: rgb(116, 78, 68);
        }

</style>