一天到晚游泳的鱼css-doodle版(学习黑师海底世界路径效果)
位置:
首页 >
悄然作业[发布: 2023.5.20 作者: 花飞飞 阅读: 247]
: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 发布: 照抄作业,歌词用了之前做过的贴子,没再重新找了。。