如果（学习黑师《母亲》CSS-DOODLE加歌词效果）
位置:
首页 >
悄然作业[ 发布时间: 2023.5.14 作者: 花飞飞 阅读: 191 ]
:doodle {@grid: 4 / 1024px 640px;z-index: 1;}@size: @r(40,100)px;@place: @r(5,90)% @r(5,20)%;background: rgba(@m3(@r(255)), @r(.6,.9));clip-path: @shape(fill: evenodd;points: 400;x: cos(5t)^2 * sin(t);y: sin(2t)^2 * cos(5t););@nth(@size) {@size: 160px;@place: center;cursor: pointer;}animation: rot @r(3,9)s infinite linear var(--state);@keyframes rot {to {transform: rotate(@p(-360,360)deg); } } :doodle { @size: auto 4em; bottom: 10px; --geci: "css-doodle player"; --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%; } }
前一篇: 一花一世界（学习黑师《可能》css-doodle player效果）
下一篇: 雨中荷塘（学习黑师《夜雨》CSS-DOODLE雨丝&歌词效果）
发表评论:
评论列表 [1条]
#1 | 马黑 于 2023-5-16 07:28 发布: 蝴蝶转圈圈也很漂亮
