时间的力量（学习黑师时钟走动及路径练习作业之二）
位置:
首页 >
悄然作业[ 发布时间: 2023.5.28 作者: 花飞飞 阅读: 304 ]
:doodle {@size: 1024px 640px; cursor: pointer; z-index: 4;linear-gradient(blue,green);background-blend-mode: lighten;}@match(@i ≤ @size - 1) {@size: @r(20,60)px;clip-path: @shape(points: 360;scale: .3;move: 0 .10;x: sin(t) + sin(3t) + sin(4t);y: cos(t) + cos(3t) + cos(5t);rotate: 90;);background: Silver;position: absolute;offset-path: path('M@r(50) @r(500), h@r(200,1000) @r(500), v@r(20,550) @r(1000,640),h@r(200,1000) @r(200) ');:after {content: '';position: absolute;right: 10px;width: 10px;height: 10px;border-radius: 50%;background: radial-gradient(Gray,snow);}animation: swim @r(10,30)s @r(-90, 0)s infinite ease-in-out var(--state);}@nth(@size) { clip-path:@shape( points: 1000;move: 0 1;x: cos(3t) + cos(t)/2 + sin(40t)/7;y: sin(9t) + sin(t)/2 + cos(40t)/7; ); @size: 230px;@place: center 90%;top:520px;left:140px;background:Gray;cursor: pointer;transform-origin: 100px 10px;animation: rot 1s infinite alternate linear var(--state); }@keyframes rot { to { transform: rotate(1deg); } }@keyframes swim { to { offset-distance: 100%; } } :doodle {@size: 200px;border: 10px solid Black;left:404px;bottom:110px;border-radius: 50%;background: DarkGray @doodle(@grid: 60x1 / 100%;@size: 4px 2px;@place: @plot(r: .99;);background: Black;);--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,DarkGray);transform: rotate(var(--hDeg));animation: mRot 3600s infinite linear;}@nth(14) {@size: 4px 80px;@place: 50% 27.5%;background: linear-gradient(white,DarkGray);transform: rotate(var(--mDeg));animation: mRot 3600s infinite linear;}@nth(15) {@size: 2px 90px;@place: 50% 25%;background: linear-gradient(white,black);transform: rotate(var(--sDeg));animation: sRot 60s infinite linear;}@nth(16) {@size: 18px;@shape: octagon;background: radial-gradient(DarkGray,black);}@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)); } } :doodle { @size: auto 4em; z-index:5; bottom: 10px; --geci: "css-doodle player"; --motion: cover2; --tt: 1s; } /* 单元格两个伪元素显示lrc歌词 */ display: grid; place-items: center start; :before, :after { content: var(--geci); color: LightGrey; /* 歌词底色 */ font: bold 2em sans-serif; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; width: 0; color:Gray; /* 同步歌词颜色 */ 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%; } }
前一篇: 快乐果农（学习黑师路径课程第一次作业）
下一篇: 六一快乐（学习黑师《雾里看花》小播效果）
发表评论:
评论列表 [1条]
#1 | 马黑 于 2023-5-28 15:55 发布: 这个路径设计的好，css-doodle时钟也用上，很不错的组合
