|
|

楼主 |
发表于 2023-5-26 07:29
|
显示全部楼层
代码
- <css-doodle grid="4" id="myClock">
- :doodle {
- @size: 200px;
- border: 6px solid black;
- border-radius: 50%;
- background: @m60(radial-gradient(black 50%, black 0) @plot(r: 1) / 2px 2px no-repeat), @m12(radial-gradient(black 50%, black 0) @plot(r: 1) / 4px 4px no-repeat);
- --sDeg: 0deg; --mDeg: 0; hDeg: 0;
- }
- @place: center;
- position: absolute;
- @match(i ≤ 12) {
- :before { content: '@pn(4,5,6,7,8,9,10,11,12,1,2,3)'; }
- transform: rotate(calc(@i * 30deg)) translate(80px) rotate(calc(@i * -30deg));
- }
- @nth(13) {
- @size: 10px;
- @shape: circle;
- background: red;
- }
- @nth(16) {
- @size: 2px 100px;
- top: 60px;
- background: rgba(200,0,0,.8);
- transform-origin: 1px 84px;
- transform: rotate(var(--sDeg));
- animation: sRot 60s infinite linear;
- }
- @nth(15) {
- @size: 3px 80px;
- top: 56px;
- background: black;
- transform-origin: 1.5px 80px;
- transform: rotate(var(--mDeg));
- animation: mRot 3600s infinite linear;
- }
- @nth(14) {
- @size: 4px 60px;
- top: 66px;
- background: black;
- transform-origin: 1.5px 60px;
- transform: rotate(var(--hDeg));
- animation: hRot 43200s infinite linear;
- }
- @keyframes sRot{ to { transform: rotate(calc(var(--sDeg) + 360deg)); } }
- @keyframes mRot{ to { transform: rotate(calc(var(--mDeg) + 360deg)); } }
- @keyframes hRot{ to { transform: rotate(calc(var(--hDeg) + 360deg)); } }
- </css-doodle>
- <script>
- (function() {
- let script = document.createElement('script');
- script.src = '/css-doodle.min.js';
- document.head.appendChild(script);
- 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');
- })();
- </script>
复制代码
|
|