|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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); }
}
|
5 |
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
梦缘
| + 30 |
+ 60 |
+ 30 |
很给力! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|