|
|

楼主 |
发表于 2023-5-26 21:38
|
显示全部楼层
代码:
- <css-doodle grid="4" id="myClock">
- :doodle {
- @size: 200px;
- border: 10px solid rgba(0,100,200,.8);
- border-radius: 50%;
- background: lightblue @doodle( /* 刻度 */
- :doodle { @grid: 1x60 / 100%; }
- @size: 3px;
- @place: center;
- @shape: circle;
- background: navy;
- transform: rotate(calc(@i * 6deg)) translate(90px);
- ) no-repeat;
- --sDeg: 0deg; --mDeg: 0deg; --hDeg: 0deg;
- }
- @place: center;
- transform-origin: 50% 100%;
- @match(i ≤ 12) { /* 钟点数 */
- :before { content: '@pn(4,5,6,7,8,9,10,11,12,1,2,3)'; }
- transform: rotate(calc(@i * 30deg)) translate(78px) rotate(calc(@i * -30deg));
- }
- @nth(13) { /* 时针 */
- @size: 6px 60px;
- @place: 50% 32.5%;
- background: linear-gradient(snow,navy);
- transform: rotate(var(--hDeg));
- }
- @nth(14) { /* 分针 */
- @size: 4px 80px;
- @place: 50% 27.5%;
- background: linear-gradient(tan,navy);
- transform: rotate(var(--mDeg));
- }
- @nth(15) { /* 秒针 */
- @size: 2px 90px;
- @place: 50% 25%;
- background: linear-gradient(white,crimson);
- transform: rotate(var(--sDeg));
- }
- @nth(16) { /* 针帽 */
- @size: 20px;
- @shape: circle;
- background: radial-gradient(black,pink);
- }
- </css-doodle>
- <p><br><br><br><br></p>
- <script>
- (function() {
- let script = document.createElement('script');
- script.src = '/css-doodle.min.js';
- document.head.appendChild(script);
- (function godPush() {
- let now = new Date();
- let hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
- min = now.getMinutes(),
- sec = now.getSeconds(),
- msec = now.getMilliseconds();
- let hDeg = hr * 30 + (min * 6 / 12),
- mDeg = min * 6 + (sec * 6 / 60),
- sDeg = sec * 6 + (msec * 0.36 / 1000);
- myClock.style.setProperty('--hDeg', hDeg + 'deg');
- myClock.style.setProperty('--mDeg', mDeg + 'deg');
- myClock.style.setProperty('--sDeg', sDeg + 'deg');
- setTimeout(godPush,1000);
- })();
- })();
- </script>
复制代码
|
|