一天到晚游泳的鱼css-doodle版（学习黑师海底世界路径效果）

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

:doodle {@size: 1024px 640px; cursor: pointer; z-index: 4;linear-gradient(blue,green);background-blend-mode: lighten;}@match(@i ≤ @size - 1) {@size: @r(50,100)px;@shape: @p(fish, whale);background: rgba(@m3(@r(255)), .9);position: absolute;offset-path: path('M@r(200) @r(200), L@r(800,1000) @r(300), L@r(400,550) @r(500,640) Z');:after {content: '';position: absolute;right: 10px;width: 10px;height: 10px;border-radius: 50%;background: radial-gradient(black,snow);}animation: swim @r(10,30)s @r(-10, 0)s infinite ease-in-out var(--state);}@nth(@size) { clip-path: @shape( points: 480;scale: .3;move: 0 .35;x: sin(t) + sin(6t) + tan.sin(2t);y: cos(t) + cos(5t) + tan.cos(8t); ); @size: 100px;@place: center 90%;background: rgba(0,139,139,.65);cursor: pointer;animation: rot 5s infinite linear var(--state);}@keyframes swim { to { offset-distance: 100%; } }@keyframes rot { to { transform: rotate(360deg); } }

:doodle { @size: auto 4em; z-index:5; top: 10px; --geci: "css-doodle player"; --motion: cover2; --tt: 1s; } /* 单元格两个伪元素显示lrc歌词 */ display: grid; place-items: center start; :before, :after { content: var(--geci); color: Honeydew; /* 歌词底色 */ font: bold 2em sans-serif; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; width: 0; color:Teal; /* 同步歌词颜色 */ 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%; } }

前一篇: 童年的歌谣（学习黑师汉字逐渐下落效果）
下一篇: 沁园春长沙（空格实例）

发表评论:

评论列表 [3条]

#3 | 了了于 2023-5-20 20:32 发布: 我留言本里收了一些图案，这个小播就是那里找来的。曾试着把一群鱼换成这种小播的金鱼，眼睛跑翅膀上了，头的方向也不对。。。所以就放弃了。这样也挺好看。。。：））

#2 | 八爷于 2023-5-20 17:41 发布: 这个是水族世界哈

#1 | 了了于 2023-5-20 12:03 发布: 照抄作业，歌词用了之前做过的贴子，没再重新找了。。