越剧——一点钟

有声有色 · 发表于 2023-5-29 07:54

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由有声有色于 2023-5-29 09:19 编辑

:doodle{ @size: 80px; top: 30px; z-index: 40; clip-path: @shape( fill: evenodd; points: 200; scale: .6; r: cos(5t)^2 + sin(5t) + .3;); background: snow; cursor: pointer; animation: rot 4s infinite linear var(--state); } @keyframes rot { to { transform: rotate(360deg); } }

:doodle { top:215px; right: 510px; @size: 200px; border: 10px solid SaddleBrown; border-radius: 50%; background: Linen @doodle( /* 刻度 */ :doodle { @grid: 1x60 / 100%; } @size: 3px; @place: center; @shape: circle; background: DarkSlateGray; 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,SaddleBrown); transform: rotate(var(--hDeg)); } @nth(14) { /* 分针 */ @size: 4px 80px; @place: 50% 27.5%; background: linear-gradient(tan,SaddleBrown); transform: rotate(var(--mDeg)); } @nth(15) { /* 秒针 */ @size: 2px 90px; @place: 50% 25%; background: linear-gradient(white,SaddleBrown); transform: rotate(var(--sDeg)); } @nth(16) { /* 针帽 */ @size: 18px; @shape: circle; background: radial-gradient(Peru,Tan); }

:doodle { @size: auto 4em; top: 600px; --geci: "花潮lrc在线"; --motion: cover2; --tt: 1s; } /* 单元格两个伪元素显示lrc歌词 */ display: grid; place-items: center start; :before, :after { content: var(--geci); color: snow; /* 歌词底色 */ font: bold 2em sans-serif; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; width: 0; color: Sienna; /* 同步歌词颜色 */ overflow: hidden; animation: var(--motion) var(--tt) linear forwards var(--state); } @keyframes cover1 { from { width: 0; } to { width: 100%; } } @keyframes cover2 { from { width: 0; } to { width: 100%; } }

:doodle { @size: 1200px 750px; --state:paused; } position: absolute; left: @r(255)%; top: -10%; :after { position: absolute; content: '@p(✲,❄)'; color: snow; font-size: @r(6, 24)px; } animation: fall 40s @r(-6, 36)s infinite var(--state); @keyframes fall { from { transform: rotate(0deg) translate(0px); } to { transform: rotate(@r(-60,60)deg) translate(-1500px); } }