注册时间2021-5-24
在线时间 小时
- 最后登录
- 1970-1-1
|
本帖最后由 醉美水芙蓉 于 2023-5-25 22:32 编辑
:doodle {
@size: 1024px 640px;
z-index: 1;
}
@size: @r(4, 8)px;
@place: 390px 360px;
border-radius: 50%;
background: rgba(@m3(@r(222)), @r(.7, 1));
animation: fly @r(6,16)s @r(-6,0)s infinite linear var(--state);
@nth(@size) {
@size: 100px;
@shape: bud 5;
background: rgba(50,50,250,.7);
cursor: pointer;
animation: rot 5s infinite linear var(--state);
}
@keyframes fly {
0% { transform: perspective(800px) rotate(0) translate3d(0, 0, 0); }
100% { transform: perspective(800px) rotate(@p(-720, 720)deg) translate3d(var(--rx), var(--ry), var(--rz)); }
}
@keyframes rot { to { transform: rotate(360deg); } }
--rx: @r(10,50)px; --ry: @r(10,80)px; --rz: @r(20,800)px;
:doodle {
@size: auto 4em;
top: 10px;
left:500px;
--geci: "lrc在线"; --motion: cover2; --tt: 1s;
}
/* 单元格两个伪元素显示lrc歌词 */
display: grid;
place-items: center start;
:before, :after {
content: var(--geci);
color: gray; /* 歌词底色 */
font: bold 2em sans-serif;
text-shadow: 1px 1px 2px #000;
white-space: pre;
}
:after {
position: absolute;
width: 0;
color: darkgreen; /* 同步歌词颜色 */
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%; } }
|
评分
-
查看全部评分
|
发表于 2023-5-25 22:31
发表于 2023-5-26 04:21
楼主
发表于 2023-5-26 06:42
