CSSで時計のアイコンを動かす

こんにちは。ましじめの田村です。

CSSで時計のアイコンと動きをつけたい場合がありました。
その場合次のようなコードで実現出来そうです。

表示例

コード

is-clock--time1 - 12で時間の調整が可能です。

html

 <div class="clock is-clock--time5">
  <span class="clock__hands"></span>
</div> 

css

.clock {
    display: inline-block;
    top: 0.3em;
    position: relative;
    border-radius: 50%;
    border: 2px solid #000;
    width: 40px;
    height: 40px;
}

.clock .clock__hands {
    position: absolute;
    z-index: 20;
    top: 50%;
    left: 50%;
    margin-top: -2px;
    margin-left: -1px;
    width: 2px;
    height: 10px;
    background: #000;
    border-radius: 2px;
    transform-origin: 1px 1px;
    transform: rotate(450deg);
}

.clock:hover .clock__hands {
    animation: clock 20s linear 0s infinite;
    transform-origin: 1px 1px;
}

.clock .clock__hands::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0px;
    width: 2px;
    height: 14px;
    background: #000;
    border-radius: 2px;
    transform-origin: 1px 1px;
    transform: rotate(450deg);
}

.clock:hover .clock__hands::after {
    animation: clock 1s linear 0s infinite;
    transform-origin: 1px 1px;
}

.is-clock--time1 .clock__hands {
    transform: rotate(210deg);
}

.is-clock--time2 .clock__hands {
    transform: rotate(240deg);
}

.is-clock--time3 .clock__hands {
    transform: rotate(270deg);
}

.is-clock--time4 .clock__hands {
    transform: rotate(300deg);
}

.is-clock--time5 .clock__hands {
    transform: rotate(330deg);
}

.is-clock--time6 .clock__hands {
    transform: rotate(360deg);
}

.is-clock--time7 .clock__hands {
    transform: rotate(390deg);
}

.is-clock--time8 .clock__hands {
    transform: rotate(420deg);
}

.is-clock--time9 .clock__hands {
    transform: rotate(450deg);
}

.is-clock--time10 .clock__hands {
    transform: rotate(480deg);
}

.is-clock--time11 .clock__hands {
    transform: rotate(510deg);
}

.is-clock--time12 .clock__hands {
    transform: rotate(540deg);
}

.is-clock--time1 .clock__hands::after {
    transform: rotate(690deg);
}

.is-clock--time2 .clock__hands::after {
    transform: rotate(660deg);
}

.is-clock--time3 .clock__hands::after {
    transform: rotate(630deg);
}

.is-clock--time4 .clock__hands::after {
    transform: rotate(600deg);
}

.is-clock--time5 .clock__hands::after {
    transform: rotate(570deg);
}

.is-clock--time6 .clock__hands::after {
    transform: rotate(540deg);
}

.is-clock--time7 .clock__hands::after {
    transform: rotate(510deg);
}

.is-clock--time8 .clock__hands::after {
    transform: rotate(480deg);
}

.is-clock--time9 .clock__hands::after {
    transform: rotate(450deg);
}

.is-clock--time10 .clock__hands::after {
    transform: rotate(420deg);
}

.is-clock--time11 .clock__hands::after {
    transform: rotate(390deg);
}

.is-clock--time12 .clock__hands::after {
    transform: rotate(360deg);
}

@-webkit-keyframes clock {
    from {
        transform: rotate(-40deg);
    }
    to {
        transform: rotate(320deg);
    }
}

@keyframes clock {
    from {
        transform: rotate(-40deg);
    }
    to {
        transform: rotate(320deg);
    }
}

以上「CSSで時計のアイコンを動かす」でした。
CSSで似た動きを作りたい場合参考にしてみてください。

---