一束光(学习黑师2023.7.4新粒子效果)

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

:doodle { @size: 260px; cursor: pointer; right: 580px; top: 220px; opacity: .96;z-index: 4; }clip-path: @shape(points: 360;frame: 18;turn: .5;scale: .08;x: 9 * cos(10t) + cos(44t);y: 9 * sin(10t) + sin(44t););background: linear-gradient(DeepSkyBlue,Orange,MediumPurple);animation: rot 6s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); } }

:doodle { @size: auto 4em; z-index:5; bottom: 10px; --geci: " css-doodle player"; --motion: cover2; --tt: 1s; }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: Sienna;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-7-5 07:49 发布: do,canMove，都是自己命名的变量名称，个人命名的方式方法可能不一样，但一般会顾及语义化。我的命名，canMove，意为可以移动，这个变量为真是粒子可以移动，为假是粒子停止，因为在粒子移动的自定义函数加入了这个 canMove 变量作为运行条件。

#2 | 悄然于 2023-7-5 07:39 发布: 太开心了，这下子可以全停了。。。这个布尔变量之前在三元教程里见过一面，长的是DO=false DO=true,原来要根据具体情况把DO换成对应的动作。。。

#1 | 马黑于 2023-7-5 07:00 发布: JS中，变量 canMove 是布尔变量，默认 canMove = true，真。把它加入 mState 函数里就能随音频控制粒子：aud.paused ? (..., ..., canMove = false) : (..., ..., canMove = true);