カテゴリ：CSS

CSSで時計を作って回そう

この世で半永久的に動くもの、それは時計です。

何の変哲もないアナログ時計

transformのrotateZプロパティによって針が回ります。

CSSの@keyframesブロックには針を回す処理を書いています。進捗率0%の時transform: rotateZ(0deg);、100%の時transform: rotateZ(360deg);とすれば1周できます。しかしこれだけでは回らず、どのくらい時間をかけて回すのかを命令する必要があります。

animation: clockHandRotation 〇〇〇〇 linear infinite forwards;の丸部分には次のような命令を書きます。

秒針は60秒で1周するので60s
分針は60分=3600秒で1周するので3600s
時針は12時間=43200秒で1周するので43200s

プレビューは下の通りです。ソースコードはタブ切り替えで確認できます。

HTMLCSSJavaScriptプレビュー

<div class="rac_clock">
    <div class="l_centering clockIndex">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="l_centering clockHands">
        <div class="l_centering clockHourHandWrap">
            <div class="clockHourHand">
                <div></div>
            </div>
        </div>
        <div class="l_centering clockMinuteHandWrap">
            <div class="clockMinuteHand">
                <div></div>
            </div>
        </div>
        <div class="l_centering clockSecondHandWrap">
            <div class="clockSecondHand">
                <div></div>
            </div>
        </div>
    </div>
</div>

@keyframes clockHandRotation {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

.rac_clock {
  background-color: #fdf7ea;
  border: 0.5rem solid #73633f;
  border-radius: 50%;
  box-sizing: border-box;
  height: 16rem;
  padding: 0.25rem;
  position: relative;
  width: 16rem;
}

.rac_clock .l_centering, .rac_clock {
  align-items: center;
  display: flex;
  justify-content: center;
}

.rac_clock .clockIndex {
  border-radius: 50%;
  height: 95%;
  position: absolute;
  width: 100%;
}

.rac_clock .clockIndex > div {
  background-image: linear-gradient(#beb8a8 10%, transparent 10%);
  height: 100%;
  position: absolute;
  width: 3%;
}

.rac_clock .clockIndex > div:nth-child(1) {
  transform: rotate(30deg);
}

.rac_clock .clockIndex > div:nth-child(2) {
  transform: rotate(60deg);
}

.rac_clock .clockIndex > div:nth-child(3) {
  transform: rotate(90deg);
}

.rac_clock .clockIndex > div:nth-child(4) {
  transform: rotate(120deg);
}

.rac_clock .clockIndex > div:nth-child(5) {
  transform: rotate(150deg);
}

.rac_clock .clockIndex > div:nth-child(6) {
  transform: rotate(180deg);
}

.rac_clock .clockIndex > div:nth-child(7) {
  transform: rotate(210deg);
}

.rac_clock .clockIndex > div:nth-child(8) {
  transform: rotate(240deg);
}

.rac_clock .clockIndex > div:nth-child(9) {
  transform: rotate(270deg);
}

.rac_clock .clockIndex > div:nth-child(10) {
  transform: rotate(300deg);
}

.rac_clock .clockIndex > div:nth-child(11) {
  transform: rotate(330deg);
}

.rac_clock .clockIndex > div:nth-child(12) {
  transform: rotate(360deg);
}

.rac_clock .clockHands,
.rac_clock .clockHands > div {
  height: 100%;
  position: absolute;
  width: 100%;
}

.rac_clock .clockHourHandWrap {
  animation: clockHandRotation 43200s linear infinite forwards;
}

.rac_clock .clockMinuteHandWrap {
  animation: clockHandRotation 3600s linear infinite forwards;
}

.rac_clock .clockSecondHandWrap {
  animation: clockHandRotation 60s linear infinite forwards;
}

.rac_clock .clockHourHand,
.rac_clock .clockMinuteHand,
.rac_clock .clockSecondHand {
  position: absolute;
}

.rac_clock .clockHourHand > div,
.rac_clock .clockMinuteHand > div,
.rac_clock .clockSecondHand > div {
  border-radius: 50% / 10%;
  height: 60%;
  width: 100%;
}

.rac_clock .clockHourHand {
  height: 60%;
  width: 4%;
}

.rac_clock .clockHourHand > div {
  background-color: #d3483e;
}

.rac_clock .clockMinuteHand {
  height: 80%;
  width: 4%;
}

.rac_clock .clockMinuteHand > div {
  background-color: #858075;
}

.rac_clock .clockSecondHand {
  height: 90%;
  width: 1%;
}

.rac_clock .clockSecondHand > div {
  background-color: #c0b699;
}

let nowTime = new Date();
let hour = nowTime.getHours();
let minute = nowTime.getMinutes();
let second = nowTime.getSeconds();
let hourElem = document.getElementsByClassName('clockHourHand')[0];
let minuteElem = document.getElementsByClassName('clockMinuteHand')[0];
let secondElem = document.getElementsByClassName('clockSecondHand')[0];

hourElem.style.transform = 'rotateZ(' + (360 * (hour % 12) / 12 + minute / 2) + 'deg)';
minuteElem.style.transform = 'rotateZ(' + ((360 * minute / 60) + second / 10) + 'deg)';
secondElem.style.transform = 'rotateZ(' + (360 * second / 60) + 'deg)';

時計のソースコードとプレビュー

最後に

現在時刻を取得して針を合わせる処理はCSSでできないため、どうしてもJavaScriptが必要になります。let nowTime = new Date();で現在時刻を取得しています。

CSSで時計を作って回そう

目次

何の変哲もないアナログ時計

最後に

記事を書いた人

おすすめの記事