雨中荷塘（学习黑师《夜雨》CSS-DOODLE雨丝&歌词效果）

位置: 首页 > 悄然作业[ 发布时间: 2023.5.15 作者: 花飞飞阅读: 204 ]

:doodle { @size: 1024px 640px; box-shadow: 0 0 8px #000; position: relative; z-index: 1; } @match(i ≤ @size - 2) { @size: @r(1,2)px @r(10,60)px; @place: @r(0,1024)px -100px; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.3)); animation: fall @r(.5,1.5)s @r(-4,0)s infinite linear var(--state); } @nth(@size - 1, @size) { @size: 100px; @place: 290px 400px; clip-path: @shape(fill: evenodd;points: 300;scale: .45;x: cos(2t) + cos(π - 7t);y: sin(2t) + sin(7t); ); background: Lavender; cursor: pointer; animation: rot 4s infinite linear var(--state); } @nth(@size) { @place: 540px 340px; } @keyframes fall { to { transform: translateY(783px); } } @keyframes rot { to { transform: rotate(360deg); } }

: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: LightGrey; /* 歌词底色 */ font: bold 2em sans-serif; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; width: 0; color: DarkSeaGreen; /* 同步歌词颜色 */ 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加歌词效果）
下一篇: 簇拥烈日的花(学习黑师css-doodle粒子纷飞效果)

发表评论:

评论列表 [3条]

#3 | 飞飞于 2023-5-16 14:03 发布: 果然灵动许多。。。效果挺好

#2 | 了了于 2023-5-16 12:22 发布: 好的，这个可以试试

#1 | 马黑于 2023-5-16 07:27 发布: 这个在水潭中心加个涟漪就更灵动，可以考虑图片