Show Pictures~
Index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Timing</title>
<style>
/* 基础样式 */
body {
background: linear-gradient(45deg, #e63946 0%, #1d3557 100%);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: '隶书', cursive;
overflow: hidden;
margin: 0;
position: relative;
}
/* 时钟容器 */
.container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 1200px;
height: 600px;
}
/* 罗盘时钟样式（左侧） */
.compass-clock {
width: 500px;
height: 500px;
position: relative;
background: url('nezha-bg.png') no-repeat center/cover;
border-radius: 50%;
box-shadow: 0 0 50px rgba(255, 215, 0, 0.5);
border: 10px solid rgba(255, 255, 255, 0.1);
}
/* 指针通用样式 */
.hand {
position: absolute;
bottom: 50%;
left: 50%;
transform-origin: 50% 100%;
border-radius: 10px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
/* 时针样式 */
#hour-hand {
width: 10px;
height: 120px;
background: linear-gradient(to top, #ff6b6b, #ff0000);
z-index: 3;
}
/* 分针样式 */
#minute-hand {
width: 8px;
height: 180px;
background: linear-gradient(to top, #00b4d8, #0077b6);
z-index: 2;
}
/* 秒针样式 */
#second-hand {
width: 4px;
height: 220px;
background: linear-gradient(to top, #f9c74f, #f9844a);
z-index: 1;
}
/* 中心点样式 */
.center-point {
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
position: absolute;
bottom: 50%;
left: 50%;
transform: translate(-50%, 50%);
z-index: 4;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
/* 数字时钟（右侧） */
.digital-clock {
width: 400px;
padding: 50px;
color: #fff;
font-size: 2.5em;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
position: relative;
text-align: center;
}
/* 追加图片样式 */
.motto-image {
margin-top: 20px;
width: 300px;
height: 300px;
border-radius: 20px;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}
/* AI特效 */
.ai-effect {
position: absolute;
width: 100%;
height: 100%;
pointer-even