カテゴリ: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
プレビューは下の通りです。ソースコードはタブ切り替えで確認できます。
<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();
で現在時刻を取得しています。