印度歌曲 TO南无月 （学习黑黑大地效果）

红影

:doodle { @size: 1024px 640px; z-index: 10; --ww: 300px; /* 进度条总长 */ --prog: 0; /* 进度 */ --tt1: '00:00'; /* 当前播放时间 */ --tt2: '00:00'; /* 音乐时长 */ --xplace: 50%; /* 播放器水平定位 */ --yplace: 98%; /* 播放器垂直定位 */ --color: snow; --state: paused; /* 关键帧运行状态 */ } /* 单元格1 ：进度条 */ @nth(1) { @size: var(--ww) 2px; @place: var(--xplace) var(--yplace); 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; } } /* 单元格2 ：播放时间信息 */ @nth(2) { @size: var(--ww) 20px; @place: var(--xplace) calc(var(--yplace) - 20px); :before, :after{ position: absolute; width: 100%; height: 100%; color: var(--color); } :before { content: var(--tt1); } :after { content: var(--tt2); text-align: right; } } /* 单元格3 ：播放按钮 */ @nth(3) { @size: 80px; @place: var(--xplace) calc(var(--yplace) - 46px); cursor: pointer; animation: rot 6s infinite linear var(--state); :before { content: ''; @size: inherit; @shape: star; background: var(--color); } } @match(i ≥ 4) { @size: 60px 120px; @place: 100px 500px; background: url('https://pic.imgdb.cn/item/6483cb431ddac507cc0a0b8b.gif'); offset-path: path('M100 500 Q400 -400 1000 -200'); offset-distance: 0%; offset-rotate: 0deg; animation: fly 10s calc(@r(1,10) * -1s) infinite linear var(--state); } @keyframes rot { to { transform: rotate(360deg); } } @keyframes fly { to { offset-distance: 100%; }}

红影

@南无月  谢谢月儿分享的动图抠图，用你分享的网站去弄了个跳舞的印度美女

红影

@马黑黑  谢谢黑黑的代码，学了大地的代码，还有椭圆文字那帖里的让路径上图图不转向本来想弄个路径让那些小人围绕美女，感觉旁边太空，索性让那些小人绕过播放器了。

红影

本来还想学个黑黑前面教的canvas 方法让跳舞的美女也能跟着暂停，试了半天不行，就算了可以了， 美女也可以暂停了 不熟悉，折腾够呛，午睡去，自己补偿一下：）

上海朝阳

唷，星光闪闪，说有美女，便换了极速模式

红影

上海朝阳 发表于 2023-6-10 16:06
唷，星光闪闪，说有美女，便换了极速模式

那美女暂停的时候样子很呆，没办法只能取第一个镜头

岩新新

欣赏点赞！

红影

醉美水芙蓉 发表于 2023-6-10 16:43
欣赏红影美女美贴！

感谢水芙蓉美女鼓励。

红影

岩新新 发表于 2023-6-10 16:54
欣赏点赞！

谢谢新新鼓励

樵歌

弄得好生热闹，最好让阿三妹纸跳个肚皮舞岂不更好。

樵歌

很是阿三风情，还是很好听的。

一朵梅

印度歌曲很有味～

梦油

我很喜欢印度歌曲，比如：大篷车等。
可惜，你这么好的帖子，俺没分了。

南无月

红影 发表于 2023-6-10 13:54
@南无月  谢谢月儿分享的动图抠图，用你分享的网站去弄了个跳舞的印度美女

上来就听到影子的呼唤，真是意外。
贴子一如既往的技术含量超强，各种效果熟练使用， 代码使用极其熟练。
感谢影子的关注，欣赏影子好贴！

焱鑫磊

欣赏学习！

马黑黑

很精巧的设计

千羽

好亮眼的画面，那个五星播放器好漂亮呀，炫目的小人儿好有趣

千羽

有点心疼那印度美人儿，会不会累坏了

千羽

问好无月，收礼开心