这个页面实现了一个展示多种设计风格时钟的博物馆，每个时钟都有独特的视觉效果。页面使用了 CSS 和 JavaScript 来实现时钟的动态效果和交互功能。
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
演示效果
HTML&CSS
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Document</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
body {
background: #f5f5f5;
min-height: 100vh;
margin: 0;
padding: 40px 0;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: #333;
}
h1 {
font-weight: 600;
font-size: 2.5rem;
color: #101828;
text-align: center;
display: block;
margin-top: 1em;
margin-bottom: 1em;
font-weight: bold;
}
.container {
display: flex;
gap: 40px;
padding: 20px;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center
}
.card {
background: white;
border-radius: 24px !important;
/* padding: 30px; */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-align: center;
position: relative;
width: 356px;
height: 426px;
display: flex;
align-items: center;
justify-content: center
}
.card::after {
content: attr(data-description);
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #F5F5F5;
background: linear-gradient(0deg, rgba(245, 245, 245, 1) 0%, rgba(245, 245, 245, 0.8) 39%, rgba(255, 255, 255, 0) 100%);
color: #191919;
padding: 30px;
font-size: 1rem;
line-height: 1.5;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 12;
height: calc(100% - 60px);
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
}
.card:hover::after {
opacity: 1;
}
.card h2 {
margin-top: 0;
margin-bottom: 8px;
color: #333;
font-weight: 500;
position: absolute;
top: 40px;
left: 0;
text-align: center;
width: 100%;
display: block;
z-index: 99
}
.card p {
margin-top: 0;
margin-bottom: 20px;
color: #666;
font-size: 14px;
}
.clock-container {
position: relative;
width: 280px;
height: 280px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
margin-top: 40px
}
.clock-face {
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;
}
.hour-marks {
position: absolute;
width: 100%;
height: 100%;
}
.hour-mark {
position: absolute;
left: 50%;
transform-origin: 0 140px;
}
.minute-mark {
position: absolute;
left: 50%;
transform-origin: 0 140px;
}
.hour-number {
position: absolute;
text-align: center;
transform-origin: center;
}
.hand {
position: absolute;
transform-origin: bottom center;
bottom: 140px;
left: 140px;
}
.skeuomorphic {
background: #F5F5F5;
background: linear-gradient(140deg, rgba(245, 245, 245, 1) 0%, rgba(230, 230, 230, 1) 50%, rgba(214, 214, 214, 1) 100%);
}
.skeuomorphic .clock-container {
background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px, 0 2px 5px rgba(0, 0, 0, 0.3);
border: 8px solid #fff;
border-radius: 50%;
}
.skeuomorphic .clock-face {
background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.1),
0 2px 5px rgba(0, 0, 0, 0.3);
}
.skeuomorphic .clock-reflection {
position: absolute;
width: 260px;
height: 130px;
top: 20px;
left: 10px;
border-radius: 130px 130px 0 0;
background: linear-gradient(to bottom,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 255, 255, 0) 100%);
pointer-events: none;
z-index: 11;
}
.skeuomorphic .clock-center {
position: absolute;
width: 14px;
height: 14px;
background: #333;
border-radius: 50%;
top: 133px;
left: 133px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
z-index: 10;
}
.skeuomorphic .clock-center::after {
content: "";
position: absolute;
width: 6px;
height: 6px;
background: #888;
border-radius: 50%;
top: 4px;
left: 4px;
}
.skeuomorphic .hour-mark {
width: 4px;
height: 12px;
background: #333;
margin-left: -2px;
}
.skeuomorphic .minute-mark {
width: 2px;
height: 6px;
background: #666;
margin-left: -1px;
}
.skeuomorphic .hour-number {
font-size: 24px;
font-weight: 500;
color: #333;
width: 40px;
height: 40px;
line-height: 40px;
}
.skeuomorphic .hour-hand {
width: 8px;
height: 75px;
background: #333;
border-radius: 10px 10px 0 0;
box-shadow: 2px 0px 7px rgba(0, 0, 0, 0.5);
z-index: 7;
margin-left: -4px;
}
.skeuomorphic .minute-hand {
width: 6px;
height: 105px;
background: #444;
border-radius: 10px 10px 0 0;
box-shadow: 2px 0px 6px rgba(0, 0, 0, 0.5);
z-index: 8;
margin-left: -3px;
}
.skeuomorphic .second-hand {
width: 2px;
height: 115px;
background: #c00;
box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.5);
z-index: 9;
}
.skeuomorphic .clock-bezel {
position: absolute;
width: 290px;
height: 290px;
top: -5px;
left: -5px;
border-radius: 50%;
background: linear-gradient(135deg, #d0d0d0 0%, #f8f8f8 100%);
z-index: -1;
}
.flat-design {
background: #f2f2f7
}
.flat-design .clock-face {
background: #ffffff;
border: 3px solid #191919
}
.flat-design .clock-center {
position: absolute;
width: 12px;
height: 12px;
background: #ffcd50;
border-radius: 50%;
top: 134px;
left: 134px;
z-index: 10;
}
.flat-design .hour-mark {
width: 3px;
height: 10px;
background: #555;
}
.flat-design .minute-mark {
width: 2px;
height: 8px;
background: #bcbcbc;
}
.flat-design .hour-number {
font-size: 24px;
font-weight: 400;
color: #555;
width: 40px;
height: 40px;
line-height: 40px;
}
.flat-design .hour-hand {
width: 6px;
height: 70px;
background: #555;
z-index: 7;
margin-left: -3px;
}
.flat-design .minute-hand {
width: 4px;
height: 95px;
background: #777;
z-index: 8;
margin-left: -2px;
}
.flat-design .second-hand {
width: 2px;
height: 110px;
background: #ffcd50;
z-index: 9;
}
.material-design {
background: #EDE7F6;
}
.material-design .clock-face {
background: #512da8;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.material-design .clock-face-inner {
width: 62%;
height: 62%;
border-radius: 50%;
background: #7E57C2;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center
}
.material-design .clock-center {
position: absolute;
width: 12px;
height: 12px;
background: #f44336;
border-radius: 50%;
top: 134px;
left: 134px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
z-index: 10;
}
.material-design .hour-number {
font-size: 20px;
font-weight: 500;
color: #EDE7F6;
width: 40px;
height: 40px;
line-height: 40px;
text-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.material-design .hour-hand {
width: 6px;
height: 60px;
background: #fff;
border-radius: 4px;
z-index: 7;
margin-left: -2px;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.material-design .minute-hand {
width: 6px;
height: 98px;
background: #EDE7F6;
border-radius: 4px;
z-index: 8;
margin-left: -2px;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.material-design .second-hand {
width: 2px;
height: 110px;
background: #f44336;
z-index: 9;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.neumorphism {
border-radius: 30px;
background: #e8eaf6;
box-shadow: 10px 10px 20px #d1d1d1, -10px -10px 20px #ffffff;
}
.neumorphism .clock-face {
border-radius: 50%;
background: linear-gradient(145deg, #d1d3dd, #f8faff);
box-shadow: 20px 20px 60px #c5c7d1,
-20px -20px 60px #ffffff;
}
.neumorphism .clock-face-inner {
width: 62%;
height: 62%;
border-radius: 50%;
z-index: 1;
background: #e8eaf6;
box-shadow: 20px 20px 40px #b0b2bb,
-20px -20px 40px #ffffff;
}
.neumorphism .clock-center {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
top: 132.5px;
left: 132.5px;
background: linear-gradient(145deg, #f8faff, #d1d3dd);
box-shadow: 1px 1px 2px #797a80,
-1px -1px 2px #ffffff;
z-index: 10;
}
.neumorphism .hour-mark {
width: 2px;
height: 24px;
}
.neumorphism .hour-mark::after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 2px;
height: 16px;
border-radius: 10px;
background: #e8eaf6;
box-shadow: inset 1px 1px 7px #bec0ca,
inset -1px -1px 7px #ffffff;
}
.neumorphism .minute-mark {
display: none
}
.neumorphism .hour-number {
display: none
}
.neumorphism .hour-hand {
width: 6px;
height: 70px;
background: #030943;
border-radius: 3px;
z-index: 7;
margin-left: -2px;
}
.neumorphism .minute-hand {
width: 4px;
height: 95px;
background: #536089;
border-radius: 2px;
z-index: 8;
margin-left: -1px;
}
.neumorphism .second-hand {
width: 2px;
height: 110px;
background: #dd0f2e;
border-radius: 1px;
z-index: 9;
}
.glassmorphism {
background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
overflow: hidden
}
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.glassmorphism .clock-face {
backdrop-filter: blur(8px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(255, 255, 255, 0.33);
border: 1px solid rgba(209, 213, 219, 0.6);
overflow: hidden
}
.glassmorphism .clock-face::after {
background-color: rgba(255, 255, 255, .05);
bottom: 0;
content: '';
filter: blur(4px);
left: -99px;
position: absolute;
right: .865%;
top: -300px;
transform: rotate(45deg);
z-index: 1;
}
.glassmorphism .clock-center {
position: absolute;
width: 12px;
height: 12px;
background: white;
border-radius: 50%;
top: 134px;
left: 134px;
z-index: 10;
border: 10 solid rgba(0, 0, 0, 0.5)
}
.glassmorphism .hour-mark {
width: 4px;
height: 18px;
margin-left: -1px;
}
.glassmorphism .hour-mark::after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background: #fff;
}
.glassmorphism .minute-mark {
width: 1px;
height: 16px;
margin-left: -0.5px;
border-radius: 50%;
}
.glassmorphism .minute-mark::after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 1px;
height: 1px;
border-radius: 50%;
background: #fff;
}
.glassmorphism .hour-number {
font-size: 20px;
font-weight: 400;
color: white;
width: 40px;
height: 40px;
line-height: 40px;
display: none
}
.glassmorphism .hour-hand {
width: 5px;
height: 70px;
background: rgba(255, 255, 255, 0.9);
border-radius: 2.5px;
z-index: 7;
margin-left: -2px;
}
.glassmorphism .minute-hand {
width: 3px;
height: 95px;
background: rgba(255, 255, 255, 0.8);
border-radius: 1.5px;
z-index: 8;
margin-left: -1px;
}
.glassmorphism .second-hand {
width: 2px;
height: 110px;
background: rgba(255, 255, 255, 1);
z-index: 9;
}
.glassmorphism .shapes-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
.glassmorphism .shapes-container::after {
background-color: rgba(255, 255, 255, .05);
bottom: 0;
content: '';
filter: blur(4px);
left: -99px;
position: absolute;
right: .865%;
top: -480px;
transform: rotate(45deg);
z-index: 1;
}
.glassmorphism .shape {
position: absolute;
opacity: 0.6;
animation: float 20s infinite ease-in-out;
}
.glassmorphism .shape.circle {
width: 120px;
height: 120px;
backdrop-filter: blur(5px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(255, 255, 255, 0.38);
border: 1px solid rgba(209, 213, 219, 0.8);
border-radius: 50%;
top: 20%;
left: 10%;
animation-duration: 10s;
}
.glassmorphism .shape.rounded-square {
width: 100px;
height: 100px;
backdrop-filter: blur(5px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(255, 255, 255, 0.38);
border: 1px solid rgba(209, 213, 219, 0.8);
border-radius: 25px;
top: 70%;
left: 60%;
animation-duration: 16s;
}
@keyframes float {
0% {
transform: translateY(0px) translateX(0px) rotate(0deg);
}
50% {
transform: translateY(-25px) translateX(15px) rotate(180deg);
}
100% {
transform: translateY(0px) translateX(0px) rotate(360deg);
}
}
.claymorphism {
border-radius: 30px;
background: #f4f4fc;
box-shadow: 35px 35px 68px 0px rgba(145, 192, 255, 0.5), inset -2px -2px 16px 0px rgba(145, 192, 255, 0.6), inset 0px 11px 28px 0px rgb(255, 255, 255);
}
.claymorphism .clock-face {
background: #f4f4fc;
border-radius: 50%;
box-shadow: 35px 35px 68px 0px rgba(145, 192, 255, 0.5), inset -7px -7px 16px 0px rgba(145, 192, 255, 0.6), inset 0px 11px 28px 0px rgb(255, 255, 255);
}
.claymorphism .clock-center {
position: absolute;
width: 18px;
height: 18px;
background: #6457f9;
border-radius: 50%;
top: 131px;
left: 131px;
box-shadow: 3px 3px 6px rgba(10, 10, 40, 0.2);
z-index: 10;
}
.claymorphism .hour-mark {
width: 4px;
height: 12px;
background: #9c92ff;
margin-left: -2px;
border-radius: 2px;
}
.claymorphism .minute-mark {
width: 2px;
height: 6px;
background: #c4beff;
margin-left: -1px;
border-radius: 1px;
}
.claymorphism .hour-number {
font-size: 22px;
font-weight: 600;
color: #6457f9;
width: 40px;
height: 40px;
line-height: 40px;
}
.claymorphism .hour-hand {
width: 8px;
height: 70px;
background: #6457f9;
border-radius: 4px;
z-index: 7;
margin-left: -3px;
}
.claymorphism .minute-hand {
width: 6px;
height: 95px;
background: #9c92ff;
border-radius: 3px;
z-index: 8;
margin-left: -2px;
}
.claymorphism .second-hand {
width: 3px;
height: 110px;
background: #ff6b6b;
border-radius: 1.5px;
z-index: 9;
}
.brutalism {
background: #fff;
}
.brutalism {
border-radius: 0;
background: #c0f7fe;
box-shadow: none;
border: 4px solid #000;
transition: all 0.1s;
/* padding: 25px; */
}
.brutalism .clock-face {
background: #91a8ee;
border: 2px solid black;
box-shadow: -16px 0px 0px #000;
}
.brutalism .clock-face-inner {
display: flex;
align-items: center;
justify-content: center;
width: 90%;
height: 90%;
border: 2px solid black;
border-radius: 50%;
z-index: 1;
background: #fe90e8;
box-shadow: -8px 0px 0px #000 inset;
}
.brutalism .clock-face-inner-2 {
width: 62%;
height: 62%;
border-radius: 50%;
z-index: 2;
background: #ffff19;
box-shadow: -4px 0px 0px #000 inset;
}
.brutalism .clock-center {
position: absolute;
width: 16px;
height: 16px;
background: #000;
border-radius: 50%;
top: 132px;
left: 132px;
z-index: 10;
}
.brutalism .hour-mark {
width: 1px;
height: 50px;
margin-left: -5px;
z-index: 12
}
.brutalism .hour-mark::after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 1px;
height: 24px;
border-radius: 50%;
background: #000;
}
.brutalism .minute-mark {
display: none
}
.brutalism .hour-hand {
width: 8px;
height: 40px;
background: #000;
z-index: 7;
border-radius: 5px;
margin-left: -4px
}
.brutalism .minute-hand {
width: 8px;
height: 64px;
background: #000;
z-index: 8;
border-radius: 5px;
margin-left: -4px
}
.brutalism .second-hand {
display: none
}
.brutalism .hour-number {
display: none
}
.minimalism .card {
border-radius: 18px;
background: #ffffff;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
padding: 40px;
}
.minimalism .clock-face {
background: #ffffff;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.minimalism .clock-center {
position: absolute;
width: 8px;
height: 8px;
background: #111;
border-radius: 50%;
top: 136px;
left: 136px;
z-index: 10;
}
.minimalism .hour-mark {
width: 1px;
height: 8px;
background: #111;
margin-left: -0.5px;
opacity: 0.2;
}
.minimalism .minute-mark {
width: 1px;
height: 4px;
background: #111;
margin-left: -0.5px;
opacity: 0.1;
}
.minimalism .hour-number {
font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 18px;
font-weight: 300;
color: #111;
width: 40px;
height: 40px;
line-height: 40px;
opacity: 0.5;
}
.minimalism .hour-number:nth-child(3n) {
opacity: 1;
}
.minimalism .hour-hand {
width: 3px;
height: 65px;
background: #111;
border-radius: 1.5px;
z-index: 7;
}
.minimalism .minute-hand {
width: 2px;
height: 90px;
background: #111;
border-radius: 1px;
z-index: 8;
}
.minimalism .second-hand {
width: 1px;
height: 110px;
background: #ff3b30;
z-index: 9;
}
@media (min-width: 699px) and (max-width: 705px) {
.card {
transform: scale(0.45);
margin: -140px -120px
}
h1 {
font-size: 1.25em
}
}
</style>
</head>
<body>
<h1>Museum of Clocks</h1>
<div class="container">
<!-- Skeuomorphic -->
<div class="skeuomorphic card"
data-description="Inspired by real-world objects, this design uses shadows, textures, and depth to create a familiar, almost tactile interface.">
<h2>Skeuomorphism</h2>
<div class="clock-container">
<div class="clock-bezel"></div>
<div class="clock-face"></div>
<div class="clock-reflection"></div>
<div class="hour-marks" id="skeuomorphic-hour-marks"></div>
<div class="hour-hand hand" id="skeuomorphic-hour-hand"></div>
<div class="minute-hand hand" id="skeuomorphic-minute-hand"></div>
<div class="second-hand hand" id="skeuomorphic-second-hand"></div>
<div class="clock-center"></div>
</div>
</div>
<!-- Flat Design -->
<div class="flat-design card"
data-description="Clean, crisp, and modern. Flat design removes all unnecessary details --- no shadows or gradients, just bold colors and clear shapes.">
<h2>Flat Design</h2>
<div class="clock-container">
<div class="outer-ring"></div>
<div class="clock-face"></div>
<div class="hour-marks" id="flat-design-hour-marks"></div>
<div class="hour-hand hand" id="flat-design-hour-hand"></div>
<div class="minute-hand hand" id="flat-design-minute-hand"></div>
<div class="second-hand hand" id="flat-design-second-hand"></div>
<div class="clock-center"></div>
</div>
</div>
<!-- Material Design -->
<div class="material-design card "
data-description="Google's signature style that blends depth and motion. It uses layered elements, smooth animations, and consistent shadowing for clarity and structure.">
<h2>Material Design</h2>
<div class="clock-container">
<div class="clock-face-inner">
</div>
<div class="clock-face"></div>
<div class="hour-marks" id="material-design-hour-marks"></div>
<div class="hour-hand hand" id="material-design-hour-hand"></div>
<div class="minute-hand hand" id="material-design-minute-hand"></div>
<div class="second-hand hand" id="material-design-second-hand"></div>
<div class="clock-center"></div>
</div>
</div>
<!-- Neumorphism -->
<div class="neumorphism card"
data-description="A soft, subtle blend of light and shadow. Elements appear to be pressed into or extruded from the background, giving a modern, minimalist 3D look.">
<h2>Neumorphism</h2>
<div class="clock-container">
<div class="clock-face-inner"></div>
<div class="clock-face"></div>
<div class="hour-marks" id="neumorphism-hour-marks"></div>
<div class="hour-hand hand" id="neumorphism-hour-hand"></div>
<div class="minute-hand hand" id="neumorphism-minute-hand"></div>
<div class="second-hand hand" id="neumorphism-second-hand"></div>
<div class="clock-center"></div>
</div>
</div>
<!-- Glassmorphism -->
<div class="glassmorphism card "
data-description="A frosted glass aesthetic with soft blurs, transparency, and layered depth. Sleek, futuristic, and slightly surreal.">
<div class="shapes-container">
<div class="shape circle"></div>
<div class="shape rounded-square"></div>
</div>
<h2>Glassmorphism</h2>
<div class="clock-container">
<div class="clock-face"></div>
<div class="hour-marks" id="glassmorphism-hour-marks"></div>
<div class="hour-hand hand" id="glassmorphism-hour-hand"></div>
<div class="minute-hand hand" id="glassmorphism-minute-hand"></div>
<div class="second-hand hand" id="glassmorphism-second-hand"></div>
<div class="clock-center"></div>
</div>
</div>
<!-- Claymorphism -->
<div class="claymorphism card "
data-description="Fun and friendly with thick, rounded edges and soft shadows. Elements look like they're made of colorful, squishy clay. Playful and approachable.">
<h2>Claymorphism</h2>
<div class="clock-container">
<div class="clock-face"></div>
<div class="hour-marks" id="claymorphism-hour-marks"></div>
<div class="hour-hand hand" id="claymorphism-hour-hand"></div>
<div class="minute-hand hand" id="claymorphism-minute-hand"></div>
<div class="second-hand hand" id="claymorphism-second-hand"></div>
<div class="clock-center"></div>
</div>
</div>
<!-- Brutalism -->
<div class="brutalism card "
data-description="Neo-brutalism is a bold, raw design style that embraces minimal styling and harsh visuals. It features flat colors, visible grids, system fonts, and an intentionally unpolished look.">
<h2>Neo-brutalism</h2>
<div class="clock-container">
<div class="clock-face"></div>
<div class="clock-face-inner">
<div class="clock-face-inner-2"></div>
</div>
<div class="hour-marks" id="brutalism-hour-marks"></div>
<div class="hour-hand hand" id="brutalism-hour-hand"></div>
<div class="minute-hand hand" id="brutalism-minute-hand"></div>
<div class="second-hand hand" id="brutalism-second-hand"></div>
<div class="clock-center"></div>
</div>
</div>
<!-- Minimalism -->
<div class="minimalism card "
data-description="Simplicity at its finest. Focuses on clean lines, open space, and functionality. Less is more, with every element carefully chosen for maximum impact.">
<h2>Minimalism</h2>
<div class="clock-container">
<div class="clock-face"></div>
<div class="hour-marks" id="minimalism-hour-marks"></div>
<div class="hour-hand hand" id="minimalism-hour-hand"></div>
<div class="minute-hand hand" id="minimalism-minute-hand"></div>
<div class="second-hand hand" id="minimalism-second-hand"></div>
<div class="clock-center"></div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
setupClock("skeuomorphic");
setupClock("flat-design");
setupClock("material-design");
setupClock("neumorphism");
setupClock("glassmorphism");
setupClock("brutalism");
function setClockHands() {
const now = new Date();
const hours24 = now.getHours();
const hours = hours24 % 12 || 12;
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const ampm = hours24 >= 12 ? "PM" : "AM";
const hourDegrees = (hours % 12) * 30 + minutes * 0.5;
const minuteDegrees = minutes * 6 + seconds * 0.1;
const secondDegrees = seconds * 6;
$("[id$='-hour-hand']").css("transform", `rotate(${hourDegrees}deg)`);
$("[id$='-minute-hand']").css("transform", `rotate(${minuteDegrees}deg)`);
$("[id$='-second-hand']").css("transform", `rotate(${secondDegrees}deg)`);
}
function setupClock(style) {
for (let i = 0; i < 12; i++) {
const hourMark = $("<div>").addClass("hour-mark");
hourMark.css("transform", `rotate(${i * 30}deg)`);
$(`#${style}-hour-marks`).append(hourMark);
const hourNumber = $("<div>")
.addClass("hour-number")
.text(i === 0 ? 12 : i);
const angle = i * 30;
const radius = 112;
const x = 150 + radius * Math.sin((angle * Math.PI) / 180);
const y = 150 - radius * Math.cos((angle * Math.PI) / 180);
hourNumber.css({
left: x - 30,
top: y - 30
});
$(`.${style} .clock-face`).append(hourNumber);
for (let j = 1; j <= 4; j++) {
if (j < 5) {
const minuteMark = $("<div>").addClass("minute-mark");
minuteMark.css("transform", `rotate(${i * 30 + j * 6}deg)`);
$(`#${style}-hour-marks`).append(minuteMark);
}
}
}
}
setClockHands();
setInterval(setClockHands, 1000);
});
</script>
</body>
</html>HTML 结构
- h1：显示页面标题"Museum of Clocks"。
- container：包含多个时钟展示卡片。
- 每个卡片如 skeuomorphic、flat-design、material-design 等都包含一个时钟容器，用于展示不同设计风格的时钟。
- 每个时钟容器包含时钟的指针、刻度、数字等元素。
CSS 样式
全局样式
- body：设置页面的背景颜色、最小高度、外边距和内边距。
- h1：设置标题的字体大小、颜色、对齐方式等。
- .container：定义容器的布局，使用 Flexbox 实现响应式布局。
卡片样式
- .card：定义卡片的基本样式，包括背景颜色、圆角、阴影、大小等。
- .card:hover::after：定义卡片悬停时的提示信息样式。
时钟样式
- .clock-container：定义时钟容器的样式，包括大小、位置等。
- .clock-face：定义时钟表盘的样式，包括背景颜色、圆角等。
- .hour-marks、.minute-marks：定义时钟的刻度样式。
- .hour-hand、.minute-hand、.second-hand：定义时钟指针的样式，包括宽度、高度、颜色、旋转原点等。
- .clock-center：定义时钟中心点的样式。
不同设计风格
- 每种设计风格（如 skeuomorphic、flat-design、material-design 等）都有对应的 CSS 类，定义了不同的颜色、阴影、渐变等样式，以实现不同的视觉效果。
JavaScript 功能说明
时钟初始化
使用 setupClock 函数为每种设计风格的时钟初始化刻度和指针。 使用 setClockHands 函数更新时钟指针的位置，实现动态时钟效果。
动画效果
使用 setInterval 函数每秒更新一次时钟指针的位置，实现时钟的动态运行。
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！