css3+js制作好看的时钟效果
程序员文章站
2022-05-28 09:59:07
...
css3+js制作好看的时钟效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>时钟</title>
<style>
body{background-color: #A9D4D5;}
/*表盘边框*/
.clock {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
/* transform: skew(0deg,10deg); */
/* transform:scale(0.6); */
/* 倾斜的原点 */
transform-origin: center;
/* 设置大小 */
width: 130px;
height: 130px;
position: relative;
margin: 40px auto auto auto;
/*上边距*/
border-radius: 50%;
/*表盘阴影*/
background: #fff;
border: 10px solid #d9d9d9;
background: #eee;
background-image: -webkit-linear-gradient(top left, #eee, #f5f5f5);
background-image: linear-gradient(to bottom right, #eee, #f5f5f5);
box-shadow: 20px 20px 30px -10px rgba(0, 0, 0, 0.4), inset 10px 10px 20px rgba(0, 0, 0, 0.2);
}
.dial {
width: 100%;
height: 100%;
position: relative;
left: 0;
top: 0;
}
.dial div {
width: 0px;
height: 82px;
position: absolute;
left: 65px;
top: -15px;
transform: rotate(0deg);
transform-origin: bottom right;
}
.dial div i {
float: left;
margin-top: 20px;
margin-left: -10px;
font-style: normal;
width: 20px;
text-align: center;
font-size: 11px;
}
/* .dial div:after {
content: "";
position: absolute;
background: #333;
width: 2px;
height: 8px;
left: -1px;
} */
/* .dial div.five:after {
position: absolute;
content: "";
width: 4px;
height: 10px;
left: -2px;
top: 0;
background: rgb(15,199,247);
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
} */
.clock:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
border-radius: 50%;
z-index: 9999;
background-image: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 0%, 59%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 80%), -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 0%, 30%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 45%);
background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 0%, 59%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 80%), linear-gradient(to bottom right, rgba(255, 255, 255, 0) 0%, 30%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 45%);
}
/*秒针*/
.second {
height: 60px;
width: 8px;
-webkit-transform: translate(-50%, -100%) rotate(60deg);
transform: translate(-50%, -100%) rotate(60deg);
z-index: 3;
background: red;
}
.second .body {
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background: red;
z-index: 4;
}
.arm.arm-second:after {
-webkit-animation: moveShadow 60s linear infinite;
animation: moveShadow 60s linear infinite;
}
.second:before {
border-width: 10px 4px 41px;
border-bottom-color: red !important;
z-index: -1;
}
.arms {
position: absolute;
top: 45%;
left: 50%;
}
/*表盘圆心*/
.arms:after {
display: block;
position: absolute;
top: 4px;
left: 50%;
width: 12px;
height: 12px;
content: "";
background: #ccc;
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 999;
}
.arm {
position: absolute;
top: 50%;
left: 50%;
height: 5px;
width: 4px;
content: "";
background: black;
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
border-radius: 0 0 20px 20px;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
z-index: 4;
}
.arm:before {
display: block;
position: absolute;
top: -50px;
width: 0;
height: 0;
border: 5px solid transparent;
border-width: 10px 2px 41px;
border-bottom-color: black;
content: "";
}
.arm:after {
display: block;
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 40%;
height: calc(100% + 50px);
/* background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8), transparent 70%);
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 70%); */
z-index: 1;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
/* 分针 */
.minute {
animation: minute 60s linear infinite;
}
/*时针
*/
.hour {
animation: minute 60s linear infinite;
/* transform: translate(-50%, -100%) rotate(30deg); */
height: 0px !important;
top: 5px;
}
/*摆锤*/
.swing {
width: 6px;
height: 80px;
position: absolute;
left: 197px;
top: 400px;
background: #137fe4;
z-index: -1;
transform: rotate(-30deg);
transform-origin: 3px top;
animation: swing 1s infinite;
}
.swing:after {
content: "";
position: absolute;
width: 30px;
height: 30px;
background: #137fe4;
border-radius: 50%;
bottom: -15px;
left: -12px;
}
@keyframes swing {
0% {
transform: rotate(-30deg);
}
50% {
transform: rotate(30deg);
}
100% {
transform: rotate(-30deg);
}
}
</style>
</head>
<body>
<div class="clock">
<div id="dial" class="dial"></div>
<div class="arms">
<div id="second" class="arm second">
<div class="body"></div>
</div>
<div id="minute" class="arm minute"></div>
<div id="hour" class="arm hour"></div>
</div>
<!-- <div class="swing"></div> -->
</div>
<script>
var dial = document.getElementById("dial");
var secondId = document.getElementById("second");
var minuteId = document.getElementById("minute");
var hourId = document.getElementById("hour");
/*获取当前时间
*
*/
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
/*计算页面指针加载时的角度
*/
hourDeg = 360 * (hour % 12) / 12;
minuteDeg = 360 * minute / 60;
secondDeg = 360 * second / 60;
hourId.style.transform = "rotate(" + hourDeg + "deg)";
minuteId.style.transform = "rotate(" + minuteDeg + "deg)";
secondId.style.transform = "rotate(" + secondDeg + "deg)";
var Deg = 0;
for (var i = 0; i < 60; i++) {
var ke = document.createElement("div"); //创建一个div
var hourNum = i / 5; //当为5时
if (hourNum == 0) hourNum = 12;
if (i % 5 == 0) { //大刻度
ke.className = "five";
ke.innerHTML = "<i>" + hourNum + "</i>"
}
ke.style.transform = "rotate(" + Deg + "deg)";
dial.appendChild(ke);
Deg += 6;
}
function loopSecond() {
secondDeg = 360 * second / 60;
baseMinuteDeg = 360 * minute / 60;
baseHourDeg = 360 * (hour % 12) / 12;
minuteDeg = baseMinuteDeg + (6 * second / 60);
hourDeg = baseHourDeg + (30 * minute / 60);
hourId.style.transform = "rotate(" + hourDeg + "deg)";
minuteId.style.transform = "rotate(" + minuteDeg + "deg)";
secondId.style.transform = "rotate(" + secondDeg + "deg)";
second += 1;
if (second > 60) {
second = 1;
minute += 1;
}
if (minute == 60) {
minute = 0;
hour += 1;
}
setTimeout(function () {
loopSecond();
}, 1000);
}
loopSecond();
</script>
</body>
</html>
如想观看线上效果请移步我的个人主页https://www.cruijun.com/