【罗盘时钟(星空版)---使⽤html,js,css编写。(附全部源代码+效果)】⽬录效果换个背景:源 代 码index.html
CSDN---追 梦 者 clock.cssbody{ font-size: 14 px; font-size: 14px; color: #ffffff; font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif; background: url(../image/bg2.jpg) no-repeat; padding: 0; margin: 0; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; }.clock{ list-style: none; margin: auto; padding: 0; width: 700px; height: 700px; position: fixed; top: 0; right: 0; bottom: 0; left: 0; line-height: 20px; user-select: none;}.clock .date{ position: absolute; z-index: 1; width: 100%; height: 20px; text-align: center; top: 340px; left: 0;}.clock .hour{ position: absolute; z-index: 3; width: 36 0px; height: 20px; top: 340px; left: 170px; transition: transform 0.3s ease-in-out 0s; transform:rotate(0deg);}.clock .hour>div{ position: absolute; width: 100%; right: 0; top: 0; transition: transform 1s ease-in-out 0s; transform:rotate(0deg);}.clock .hour>div>div{ float: right; width: 6 0px; text-align: right;}.clock .minute{ position: absolute; z-index: 4; width: 5 20px; height: 20px; top: 340px; left: 9 0px; left: 90px;}.clock .sec{ position: absolute; z-index: 5; width: 680px; height: 20px; top: 340px; left: 10px;}.clock>hr{ height: 0; width: 0%; position: absolute; z-index: 1; border: #ffffff solid 0; border-bottom-width: 1px; margin: 10px 0 0 0; left: 50%; top: 50%; tra...