css实现时钟(不用背景图)
2019-04-28 本文已影响0人
pengtoxen
在不用背景图的前提下,用css实现时钟
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>clock</title>
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
height: 100vh;
width: 100vw;
display: flex;
}
.clock {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #fff;
position: relative;
border: 2px dotted #a2a2a2;
}
.middle-border {
width: 100%;
height: 100%;
border-radius: 50%;
border: 5px solid rgb(183, 13, 13);
padding: 3px;
}
.out-border {
width: 350px;
height: 350px;
border-radius: 50%;
border: 5px solid #ff1515;
}
.center {
background-color: rgb(231, 171, 163);
border: 2px solid rgb(234, 142, 129);
position: absolute;
left: calc(50% - 10px);
top: calc(50% - 10px);
width: 15px;
height: 15px;
border-radius: 50%;
}
.point {
position: absolute;
background-color: rgb(177, 60, 49);
z-index: 210;
width: 5px;
height: 5px;
border-radius: 50%;
top: 50%;
left: 50%;
margin-top: -2.5px;
margin-left: -2.5px;
}
.hourHand {
width: 5px;
height: 75px;
background-color: #666665;
transform-origin: bottom center;
border-radius: 4px;
position: absolute;
top: 80px;
left: 155px;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
/* transform: rotate(270deg); */
}
.minuteHand {
width: 5px;
height: 120px;
background-color: #666665;
transform-origin: bottom center;
border-radius: 4px;
position: absolute;
top: 37px;
left: 155px;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
/* transform: rotate(90deg); */
}
.secondHand {
width: 2px;
height: 120px;
background-color: #de6857;
transform-origin: bottom center;
border-radius: 4px;
position: absolute;
top: 37px;
left: 155px;
transition: all 0.06s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
/* transform: rotate(145deg); */
}
.arrow {
position: absolute;
height: 0;
width: 0;
left: -3px;
top: -6px;
border-top: 4px solid transparent;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 8px solid #de6857;
}
.clock ul {
list-style: none;
padding: 0;
}
.clock ul li {
position: absolute;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 15px;
color: #000;
}
.clock ul li:nth-child(1) {
right: 22%;
top: 6.5%;
transform: rotate(30deg);
}
.clock ul li:nth-child(2) {
right: 6%;
top: 25%;
transform: rotate(60deg);
}
.clock ul li:nth-child(3) {
right: 1%;
top: calc(50% - 10px);
transform: rotate(90deg);
}
.clock ul li:nth-child(4) {
right: 6%;
top: 69%;
transform: rotate(120deg);
}
.clock ul li:nth-child(5) {
right: 22%;
top: 84%;
transform: rotate(150deg);
}
.clock ul li:nth-child(6) {
right: calc(50% - 10px);
top: calc(99% - 20px);
/* transform: rotate(180deg); */
}
.clock ul li:nth-child(7) {
left: 22%;
top: 84%;
transform: rotate(210deg);
}
.clock ul li:nth-child(8) {
left: 6%;
top: 69%;
transform: rotate(240deg);
}
.clock ul li:nth-child(9) {
left: 1%;
top: calc(50% - 10px);
transform: rotate(270deg);
}
.clock ul li:nth-child(10) {
left: 6%;
top: 25%;
transform: rotate(300deg);
}
.clock ul li:nth-child(11) {
left: 22%;
top: 6.5%;
transform: rotate(330deg);
}
.clock ul li:nth-child(12) {
right: calc(50% - 10px);
top: 1%;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="container">
<div class="out-border">
<div class="middle-border">
<div class="clock">
<div class="hourHand"></div>
<div class="minuteHand"></div>
<div class="secondHand">
<div class="arrow"></div>
</div>
<div class="center">
<div class="point"></div>
</div>
<ul>
<li>
<span>1</span>
</li>
<li>
<span>2</span>
</li>
<li>
<span>3</span>
</li>
<li>
<span>4</span>
</li>
<li>
<span>5</span>
</li>
<li>
<span>6</span>
</li>
<li>
<span>7</span>
</li>
<li>
<span>8</span>
</li>
<li>
<span>9</span>
</li>
<li>
<span>10</span>
</li>
<li>
<span>11</span>
</li>
<li>
<span>12</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<script>
window.onload = function () {
const hourHand = document.querySelector(".hourHand");
const minuteHand = document.querySelector(".minuteHand");
const secondHand = document.querySelector(".secondHand");
const clock = document.querySelector(".clock");
function setDate() {
const today = new Date();
const second = today.getSeconds();
const secondDeg = (second / 60) * 360 + 360;
secondHand.style.transform = `rotate(${secondDeg}deg)`;
const minute = today.getMinutes();
const minuteDeg = (minute / 60) * 360;
minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
const hour = today.getHours();
const hourDeg = (hour / 12) * 360;
hourHand.style.transform = `rotate(${hourDeg}deg)`;
}
setInterval(setDate, 1000);
}
</script>
</body>
</html>
