基于html+css3酷炫动态罗盘时钟特效
1.网页作品简介方面：基于css3属性制作酷炫的圆形罗盘时钟，酷炫动态时钟特效，获取当前本地时间设置。
2.网页作品编辑方面：作品下载后可使用任意HTML编辑软件(例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm所有编辑器均可使用)
文章目录
基于html+css3酷炫动态罗盘时钟特效一、作品演示二、代码目录三、代码实现四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)五、源码获取六、更多HTML期末大作业(成品下载) >>>戳我>>>点击进入200例期末大作业作品 二、代码目录 三、代码实现<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>动态时钟</title><meta name="viewport" content="width=device-width, initial-scale=1"><script src="js/jquery-3.4.1.min.js"></script><script src="js/test.js"></script><script src="js/common.js"></script><script src="js/config.js"></script></head><style>*{margin: 0;padding: 0;}body{background-attachment: fixed;color: #F5F4F6;font-size: 12px;font-weight: bold;overflow: hidden;width: 1000px;height: 900px;font-family: "微软雅黑";}audio{position: absolute;right: 0;opacity: 0.1;transition: all 1s;}audio:hover{opacity: 1;}.current{color: #D1A3F7;}video{z-index: -1;/* object-fit: fill; */position: fixed;/* right: 0px;bottom: 0px; */min-width: 100%;min-height: 100%;/* height: auto;width: auto; */}.main-content{position: absolute; top:50%;left: 50%;}.main-content .year{position: relative;top: -13px;left: -38px;text-align: center}.main-content .year span{position: absolute;width: 80px;}.main-content .month{position: relative;top: -13px;left: 40px;}.month span{position: absolute;width: 60px;}.main-content .day{position: relative;top: -13px;left: 85px;}.day span{position: absolute;width: 65px;}.main-content .week{position: relative;top: -13px;left: 145px;}.week span{position: absolute;width: 65px;}.main-content .shichen{position: relative;top: -13px;left: 200px;}.shichen span{position: absolute;width: 125px;}.main-content .hour{position: relative;top: -13px;left: 240px;}.hour span{position: absolute;width: 60px;}.main-content .minute{position: relative;top: -13px;left: 300px;}.minute span{position: absolute;width: 60px;}.main-content .second{position: relative;top: -13px;left: 370px;}.second span{position: absolute;width: 60px;}</style><body><div class="main-content"><div class="year"><!-- <span></span> --></div> <div class="month"></div><div class="day"></div><div class="week"></div><div class="shichen"></div><div class="hour"></div><div class="minute"></div><div class="second"></div></div></body></html>
