|
|

楼主 |
发表于 2023-5-27 08:40
|
显示全部楼层
代码
- <css-doodle grid="4" id="myClock">
- :doodle {
- @size: 200px;
- border: 10px solid green;
- border-radius: 50%;
- background: lightgreen @doodle(
- @grid: 60x1 / 100%;
- @size: 4px 2px;
- @place: @plot(r: .99;);
- background: green;
- );
- --sDeg: 0; --mDeg: 0; hDeg: 0;
- }
- @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(80px) rotate(calc(@i * -30deg));
- }
- @nth(13) {
- @size: 6px 60px;
- @place: 50% 32.5%;
- background: linear-gradient(snow,darkgreen);
- transform: rotate(var(--hDeg));
- animation: mRot 3600s infinite linear;
- }
- @nth(14) {
- @size: 4px 80px;
- @place: 50% 27.5%;
- background: linear-gradient(white,darkgreen);
- transform: rotate(var(--mDeg));
- animation: mRot 3600s infinite linear;
- }
- @nth(15) {
- @size: 2px 90px;
- @place: 50% 25%;
- background: linear-gradient(white,green);
- transform: rotate(var(--sDeg));
- animation: sRot 60s infinite linear;
- }
- @nth(16) {
- @size: 18px;
- @shape: octagon;
- background: radial-gradient(lightgreen,green);
- }
- @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>
复制代码
|
|