<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--bg: linear-gradient(#e3e4e8, #abafba);
--fg: #17181c;
--primary1: #255ff4;
--primary2: #5583f6;
font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
background: var(--bg);
color: var(--fg);
font: 1em/1.5 sans-serif;
height: 100vh;
min-height: 480px;
display: grid;
place-items: center;
}
.clock {
box-shadow: 0 -1em 1em rgba(0, 0, 0, 0.3) inset, 0 0.5em 1em rgba(255, 255, 255, 0.1) inset, 0 -0.5em 1em rgba(255, 255, 255, 0.2), 0 1em 1em rgba(0, 0, 0, 0.3);
position: relative;
width: 16em;
height: 16em;
}
.clock,
.clock:before,
.clock:after {
border-radius: 50%;
}
.clock:before,
.clock:after,
.clock__hand {
position: absolute;
}
.clock:before,
.clock:after {
content: "";
display: block;
}
.clock:before {
box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.1) inset, 0 -0.5em 1em 0.5em rgba(0, 0, 0, 0.1);
top: 2.5em;
left: 2.5em;
width: 11em;
height: 11em;
}
.clock:after {
box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.3) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.3);
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
width: 1em;
height: 1em;
}
.clock__hand {
box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 1em 0.5em rgba(0, 0, 0, 0.3);
bottom: 50%;
transform-origin: 50% 100%;
transform: rotate(0) translateY(-1.25em);
}
.clock__hand--hr {
animation: shortHand 86400s linear infinite;
background: var(--primary1);
border-radius: 0.5em;
left: calc(50% - 0.5em);
width: 1em;
height: 3.2em;
}
.clock__hand--min {
animation: longHand 3600s linear infinite;
background: var(--primary2);
border-radius: 0.4em;
left: calc(50% - 0.4em);
width: 0.8em;
height: 3.6em;
}
.clock__hand--sec {
animation: longHand 60s cubic-bezier(0.8, 0, 0.2, 1) infinite;
background: var(--fg);
border-radius: 0.3em;
left: calc(50% - 0.3em);
width: 0.6em;
height: 4em;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: linear-gradient(#5c6270, #2e3138);
--fg: #e3e4e8;
}
.clock {
box-shadow: 0 -1em 1em rgba(0, 0, 0, 0.3) inset, 0 0.5em 1em rgba(255, 255, 255, 0.05) inset, 0 -0.5em 1em rgba(255, 255, 255, 0.05), 0 1em 1em rgba(0, 0, 0, 0.4);
}
.clock:before {
box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.2) inset, 0 -0.5em 1em 0.5em rgba(0, 0, 0, 0.2);
}
.clock:after {
box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.7);
}
}
/* Animations */
@keyframes shortHand {
0% {
box-shadow: 0em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em 1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(0deg) translateY(-1.25em);
}
0.83% {
box-shadow: 0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em 0.99em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(6deg) translateY(-1.25em);
}
1.67% {
box-shadow: 0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(12deg) translateY(-1.25em);
}
2.5% {
box-shadow: 0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(18deg) translateY(-1.25em);
}
3.33% {
box-shadow: 0.04em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(24deg) translateY(-1.25em);
}
4.17% {
box-shadow: 0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(30deg) translateY(-1.25em);
}
5% {
box-shadow: 0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(36deg) translateY(-1.25em);
}
5.83% {
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(42deg) translateY(-1.25em);
}
6.67% {
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em 0.67em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(48deg) translateY(-1.25em);
}
7.5% {
box-shadow: 0.08em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(54deg) translateY(-1.25em);
}
8.33% {
box-shadow: 0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(60deg) translateY(-1.25em);
}
9.17% {
box-shadow: 0.09em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em 0.41em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(66deg) translateY(-1.25em);
}
10% {
box-shadow: 0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em 0.31em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(72deg) translateY(-1.25em);
}
10.83% {
box-shadow: 0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(78deg) translateY(-1.25em);
}
11.67% {
box-shadow: 0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em 0.1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(84deg) translateY(-1.25em);
}
12.5% {
box-shadow: 0.1em 0em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 1em 0em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(90deg) translateY(-1.25em);
}
13.33% {
box-shadow: 0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em -0.11em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(96deg) translateY(-1.25em);
}
14.17% {
box-shadow: 0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(102deg) translateY(-1.25em);
}
15% {
box-shadow: 0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em -0.31em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(108deg) translateY(-1.25em);
}
15.83% {
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em -0.41em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(114deg) translateY(-1.25em);
}
16.67% {
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(120deg) translateY(-1.25em);
}
17.5% {
box-shadow: 0.08em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(126deg) translateY(-1.25em);
}
18.33% {
box-shadow: 0.07em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em -0.67em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(132deg) translateY(-1.25em);
}
【前端素材】模板-多种实用时间相关.zip （32个子文件） 
时间相关 
时钟.html 44KB 倒计时2.html 2KB date对象.html 2KB 多个倒计时.html 2KB 支付倒计时.html 19KB 验证码倒计时4.html 1KB 支付倒计时0.html 2KB 倒计时.html 1KB 倒计时3.html 915B 获取当前年月日+时间.html 678B customDate.html 968B 日期格式转换.html 1KB 倒计时4.html 1KB index.html 5KB date.html 3KB 验证码倒计时2.html 2KB 验证码倒计时.html 3KB images 
9.png 455B 3.png 419B 0.png 453B 1.png 336B d.png 226B 6.png 776B 5.png 408B 4.png 396B 8.png 470B 7.png 389B 2.png 424B 多.html 1KB 获取当前日期并持续更新.html 662B 倒计时5.html 3KB 验证码djs.html 703B资源评论
枫蜜柚子茶
- 粉丝: 8968
- 资源: 5351
最新资源
- 1731260448754.jpeg
- 博图 博途1s保护解除DLL Siemens.Automation.AdvancedProtection.dll
- 基于Java和Shell语言的csj_21_08_20_task1设计源码分享
- 基于Typescript和Python的MNIST卷积神经网络模型加载与预测浏览器端设计源码
- 基于Python的RasaTalk语音对话语义分析系统源码
- 基于Vue框架的租车平台前端设计源码
- 基于Java和C/C++的浙江高速反扫优惠券码830主板设计源码
- 基于Java的一站式退休服务项目源码设计
- 基于Java语言实现的鼎鸿餐厅管理系统设计源码
- 基于Java的iText扩展库：简化PDF创建与中文字体应用设计源码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
