《大鱼 (3D环绕版) - 周深》马黑黑老师指导

显示全部楼层 · 发表于 2023-5-25 19:55

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由醉美水芙蓉于 2023-5-25 20:14 编辑

:doodle { @size: 1200px 700px; z-index: 1; } @match(@i ≤ @size - 1) { @size: @r(40,110)px; position: absolute; @shape: @p(fish, whale); @place:50px 50px; background: rgba(@m3(@r(255)), .9); offset-path: path('M@r(200) @r(200,400), L@r(500,700) @r(300), L@r(1000,1160) @r(200,400), L@r(400,550) @r(300,460)Z'); :after { position:absolute; content: ''; 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) { @shape: bud 5; @size: 100px; @place: center 90%; background: rgba(200,20,20,.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; left: 450px; top: 60px; --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: BlueViolet; /* 同步歌词颜色 */ 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%; } }