<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML5圆盘时钟自定义设置代码 - 站长素材</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg viewBox="0 0 100 100" width="100" height="100">
<defs>
<!-- filters describing the shadows, applied on the larger and smaller shapes -->
<filter id="shadow-large">
<feDropShadow dx="0" dy="0" stdDeviation="4">
</filter>
<filter id="shadow-small">
<feDropShadow dx="0" dy="0" stdDeviation="0.2">
</filter>
<!-- mask used to cut out a sliver of the overlaid circle -->
<mask
id="mask">
<g transform="translate(50 50)">
<!-- starting at -15, incrementing by 30 for each hour -->
<g
class="hours" transform="rotate(-15)">
<circle
cx="0"
cy="0"
r="50"
fill="#fff">
</circle>
<path
d="M 0 -50 v 50 l 28.86 -50"
fill="#000">
</path>
</g>
</g>
</mask>
</defs>
<!-- circle making up the bottom of the clock -->
<circle
cx="50"
cy="50"
r="46"
fill="#303335">
</circle>
<!-- circle with the accent color, overlaid before the text elements -->
<circle
cx="50"
cy="50"
r="42"
fill="#EA3F3F"
filter="url(#shadow-large)">
</circle>
<!-- text elements, positioned from the center around the clock -->
<g
class="clock--face"
font-size="8px"
transform="translate(50 50)"
text-anchor="middle"
dominant-baseline="middle">
<!-- the elements are included through the script, at intervals of 30 degrees -->
<!--
<text
transform="rotate(-90) translate(35 0) rotate(90)" >
12
</text>
<text
transform="rotate(-0) translate(35 0) rotate(0)" >
03
</text>
-->
</g>
<!-- circle overlaid on the accent circle and text elements -->
<circle
mask="url(#mask)"
cx="50"
cy="50"
r="50"
fill="#303335">
</circle>
<!-- smaller circle on which the hands sit -->
<circle
cx="50"
cy="50"
r="4"
filter="url(#shadow-small)"
fill="#303335">
</circle>
<!-- clock's hands -->
<!-- centered in the clock and rotated according to the passage of time in the 0-360 range -->
<g
class="hands"
transform="translate(50 50)"
>
<g
class="minutes"
transform="rotate(240)"> <!-- change rotation of this group to affect both clock's hand -->
<path
fill="#fff"
d="M -0.4 8 h 0.8 v -33 h -0.8 z">
</path>
<circle
fill="#303335"
cx="0"
cy="0"
r="0.6">
</circle>
</g>
<g
class="seconds"
transform="rotate(80)"> <!-- change rotation of this group to affect both clock's hand -->
<path
fill="#EA3F3F"
d="M -0.4 10 h 0.8 v -45 h -0.8 z">
</path>
<circle
stroke-width="0.4"
stroke="#EA3F3F"
fill="#303335"
cx="0"
cy="0"
r="0.8">
</circle>
</g>
</g>
</svg>
<!-- div wrapping the controls to change the number of hours/minutes/seconds -->
<div class="controls">
<div class="controls__control" data-control="hours">
<button>+</button>
<span class="control--hours">h</span>
<button>-</button>
</div>
<div class="controls__control" data-control="minutes">
<button>+</button>
<span class="control--minutes">m</span>
<button>-</button>
</div>
<div class="controls__control" data-control="seconds">
<button>+</button>
<span class="control--seconds">s</span>
<button>-</button>
</div>
</div>
<script src='js/anime.min.js'></script>
<script src="js/script.js"></script>
</body>
</html>
HTML5圆盘时钟自定义设置代码.zip
版权申诉
158 浏览量
2023-10-08
20:36:02
上传
评论
收藏 11KB ZIP 举报
HTML5圆盘时钟自定义设置代码.zip （4个子文件） 
jiaoben8362 js 
anime.min.js 14KB script.js 5KB css style.css 1KB
index.html 5KB资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5837
最新资源
- 人工智能实验四 感知器算法的设计实现
- java小项目多线程多线程 复制文件 冒泡排序 群聊
- 四数之和(java代码).docx
- 701837906919458TapScanner v3.0.10 (Pro).apk
- 青岛大学人工智能实验二 利用α-β搜索的博弈树算法编写一字棋游戏
- ### 1、项目介绍 本项目Scrapy进行数据爬取，并使用Django框架+PyEcharts实现可视化大屏 效果如下：
- # 微信小程序-健康菜谱 基于微信小程序的一个查找检索菜谱的应用 ### 效果 !动态图(./res/gif/demo
- zabbix-get命令包资源
- 289ssm-mysql-jsp 计算机课程实验管理系统.zip（可运行源码+数据库文件+文档）
- 毕业设计，基于PyQt5实现的可视化界面的Python车牌自动识别系统源码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
