《心 · 机》学习黑黑椭圆旋转文本

红影

:doodle { @size: 1024px 600px; display: block; opacity: .95; position: absolute; z-index: 1; --geci: 'HUACHAO'; --motion: cover2; --ww: 300px; --prog: 0; --tt: 1s; --tt1: '00:00'; --tt2: '00:00'; --xplace: 25%; --yplace: 98%; --color: Navy; --state: paused; } position: absolute; @nth(1) { /* 歌词 */ @size: auto 3em; @place: 50% 10%; transform: translate(-50%); display: grid; place-items: center start; :before, :after { content: var(--geci); width: fit-content; height: fit-content; font: bold 2.5em Sans-serif; color: #ccc; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; white-space: pre; width: 0; color: HotPink; overflow: hidden; animation: var(--motion) var(--tt) linear forwards var(--state); } } @nth(2) { /* 进度条 */ @size: var(--ww) 2px; @place: var(--xplace) calc(var(--yplace) - 10px); background: silver; :before, :after { content: ''; } :before { position: absolute; left: 0; width: var(--prog); height: 100%; background: var(--color); } :after { width: 100%; height: 10px; cursor: pointer; } } @nth(3) { /* 按钮 */ @size: 60px; @place: var(--xplace) calc(var(--yplace) - 52px); cursor: pointer; animation: rot 6s infinite linear var(--state); :after { content: ''; @size: inherit; @shape: clover 5; background: var(--color); } } @nth(4) { /* 播放时间 */ @size: var(--ww) 20px; @place: var(--xplace) calc(var(--yplace) - 30px); :before, :after{ position: absolute; width: 100%; height: 100%; color: var(--color); } :before { content: var(--tt1); } :after { content: var(--tt2); text-align: right; } } @match(i ≥ 5) { /* 飞行物 */ @size: 200px 113px; @place: 50px 44px; background: url('https://638183.freep.cn/638183/Pic/2022/btf.gif'); offset-path: path('M0 100 Q510 200 1150 100'); offset-distance: 0%; animation: fly 40s calc(@r(30) * -3s) infinite linear var(--state); } @keyframes cover1 { from { width: 0; } to { width: 100%; } } @keyframes cover2 { from { width: 0; } to { width: 100%; } } @keyframes rot { to { transform: rotate(-360deg); } } @keyframes fly { to { offset-distance: 100%; }} :doodle { @size:1024px 600px; position: absolute; } @size: 40px; @place: 30px 260px; font: bold 30px sans-serif; font-shadow: 1px 1px 2px #000; color: RoyalBlue; :after { content: '@pn([越忘记越刻骨铭心越沉迷越遥不可及])'; } offset-path: path('M80 100 a160 70 0 1 1 320 0 a170 70 0 1 1 -320 0z'); offset-rotate: 0deg; animation: move 12s infinite linear var(--state); @keyframes move { from { offset-distance: calc(100% / @size * (@i - 1) + 100%); } to { offset-distance: calc(100% / @size * (@i - 1)); } }

红影

本来说要做个椭圆路径上的文本转动的帖子，就动手试了一下。
做完发现进度条上的时间无法正确显示 ，查了又查找不到原因。折腾到很晚，才发现是歌词的最后加了一句，却忘了那个小逗号。为一个小逗号折腾了这么久，完全没想到

红影

早知道不加最后那句，直接把做好的歌词放上去就什么事都没了。
明后天有事要忙，才想着今天完成吧，完全没想到被一个小小的错误弄得焦头烂额

小文

欣赏！

梦油

旋转的字幕很漂亮，这里也有影子朋友所付出的心血。辛苦了！

红影

醉美水芙蓉 发表于 2023-6-15 06:10
代码就是比较麻烦的，缺一点点就完全变了！

是我自己不小心的原因，自己吃了苦头也是应该的

红影

醉美水芙蓉 发表于 2023-6-15 06:11
红影美女辛苦啦！帖子很美！

谢谢水芙蓉美女，主要是为了学习一下椭圆上文字运动的代码的

红影

小文 发表于 2023-6-15 09:13
欣赏！

谢谢小文鼓励

红影

梦油 发表于 2023-6-15 09:41
旋转的字幕很漂亮，这里也有影子朋友所付出的心血。辛苦了！

谢谢梦油鼓励，我也是学着玩的

马黑黑

红影 发表于 2023-6-15 01:32
本来说要做个椭圆路径上的文本转动的帖子，就动手试了一下。
做完发现进度条上的时间无法正确显示 ，查了 ...

所以按F12有多重要：它能第一时间告诉你哪里有错

樵歌

不做则已，一做惊人！太美啦，不管从帖子、可人儿、转动的文字和音乐！

亚伦影音工作室

这个很奇妙用手机看整个网页都在动！

梦油

红影 发表于 2023-6-15 11:02
谢谢梦油鼓励，我也是学着玩的

你学得好，学得快。

南无月

这个太漂亮了，新效果都融合在一起，设计精巧，十分喜欢

千羽

影儿的代码功夫十分了得。这么多元素有机的加在一起，丰富了图意，也亮丽了画面，巧手儿哦

千羽

同步歌词挺出彩的

梦缘

问好老师，欣赏精彩分享，点赞！

红影

马黑黑 发表于 2023-6-15 12:51
所以按F12有多重要：它能第一时间告诉你哪里有错

那个我不会用啊，不知道怎么查找错处。昨天一句句对照一句句查，折腾得快趴了