拟态时钟动画

效果展示

CSS 知识点

  • box-shadow 属性灵活运用

    通过此属性来创建效果较好的仪表盘效果。

页面整体布局

html 复制代码
<!-- 时钟 -->
<div class="clock">
  <div class="numbers">
    <span style="--i:0"><b>12</b></span>
    <span style="--i:1"><b>3</b></span>
    <span style="--i:2"><b>6</b></span>
    <span style="--i:3"><b>9</b></span>

    <div class="circle" id="hr"><i></i></div>
    <div class="circle" id="mn"><i></i></div>
    <div class="circle" id="sc"><i></i></div>
  </div>
</div>

编写时钟仪表盘

css 复制代码
.clock {
  position: absolute;
  top: 50%;
  right: 220px;
  transform: translateY(-50%);
  width: 400px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #c9d5e0;
  border-radius: 50px;
  box-shadow: 30px 30px 30px -10px rgba(0, 0, 0, 0.15), inset 15px 15px 10px
      rgba(255, 255, 255, 0.75), -15px -15px 35px rgba(255, 255, 255, 0.55), inset -1px -1px
      10px rgba(0, 0, 0, 0.2);
}

绘制时钟上的数值

css 复制代码
.clock .numbers {
  position: absolute;
  inset: 35px;
  background: #152b4a;
  border-radius: 50%;
  box-shadow: 5px 5px 15px #152b4a66, inset 5px 5px 5px rgba(255, 255, 255, 0.55),
    -6px -6px 10px rgba(255, 255, 255, 1);
}

.clock .numbers span {
  position: absolute;
  inset: 5px;
  text-align: center;
  color: #fff;
  font-size: 1.25em;
  transform: rotate(calc(90deg * var(--i)));
}

.clock .numbers span b {
  font-weight: 600;
  display: inline-block;
  transform: rotate(calc(-90deg * var(--i)));
}

绘制时钟的指针

css 复制代码
.clock .numbers .circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  z-index: 10;
}

.clock .numbers .circle i {
  position: absolute;
  width: 3px;
  height: 50%;
  background: #fff;
  transform-origin: bottom;
}

.clock .numbers .circle#hr i {
  transform: scaleY(0.5);
  width: 4px;
}

.clock .numbers .circle#mn i {
  transform: scaleY(0.65);
}

.clock .numbers .circle#sc i {
  width: 2px;
  transform: scaleY(0.7);
  background: #e91e63;
  box-shadow: 0 30px 0 #e91e63;
}

编写时钟边框(中心圆)

css 复制代码
.clock .numbers::before {
  content: "";
  position: absolute;
  inset: 35px;
  background: linear-gradient(#2196f3, #e91e63);
  border-radius: 50%;
  animation: animate 2s linear infinite;
}

.clock .numbers::after {
  content: "";
  position: absolute;
  inset: 38px;
  background: #152b4a;
  border-radius: 50%;
}

编写时钟事件

javascript 复制代码
let hr = document.querySelector("#hr");
let mn = document.querySelector("#mn");
let sc = document.querySelector("#sc");

setInterval(() => {
  let day = new Date();
  let hh = day.getHours() * 30;
  let mm = day.getMinutes() * 6;
  let ss = day.getSeconds() * 6;

  hr.style.transform = `rotateZ(${hh + mm / 12}deg)`;
  mn.style.transform = `rotateZ(${mm}deg)`;
  sc.style.transform = `rotateZ(${ss}deg)`;
}, 1000);

完整代码下载

完整代码下载

相关推荐
谈不譚网安3 分钟前
CSRF请求伪造
前端·网络安全·csrf
帅云毅7 分钟前
Web3.0的认知补充(去中心化)
笔记·学习·web3·去中心化·区块链
豆豆7 分钟前
day32 学习笔记
图像处理·笔记·opencv·学习·计算机视觉
TT模板9 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩10 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真15 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
nenchoumi311929 分钟前
VLA 论文精读(十六)FP3: A 3D Foundation Policy for Robotic Manipulation
论文阅读·人工智能·笔记·学习·vln
凉、介35 分钟前
PCI 总线学习笔记(五)
android·linux·笔记·学习·pcie·pci
SuperSwaggySUP39 分钟前
4/25 研0学习日志
学习
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试