【婴宁音画】我要去西藏

婴宁

:doodle { @size: 1200px 798px; background: url('http://img.mp.sohu.com/upload/20170811/85f4408116424bca9960b9aaa7b163fa_th.png'); box-shadow: 0 0 8px #000; position: relative; margin: 0 0 0 calc(50% - 531px); z-index: 1; --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和4 ：播放按钮 */ @nth(3,4) { @size: 60px; @place: var(--xplace) calc(var(--yplace) - 36px); cursor: pointer; } @nth(3) { @size: 50px; @shape: clover 4; background: var(--color); animation: rot 6s infinite linear var(--state); } @match(i ≥ 5) { @size: 100px 88px; @place: 50px 44px; background: url('https://638183.freep.cn/638183/t22/gif/ying1.gif'); offset-path: path('M50 44 Q500 300 900 44'); offset-distance: 0%; animation: fly 10s calc(@r(1,10) * -1s) infinite linear var(--state); } @keyframes rot { to { transform: rotate(360deg); } } @keyframes fly { to { offset-distance: 100%; }}

六六

沙发是我的，哈哈

六六

婴宁的音画也做的这么好啊，伴着嫩的歌声，图图越发有穿透感了

念风

地板是我滴

念风

婴宁的动画不赖呀，越来越好了

夜雨

妞的图每一幅都给人美好的感觉。

婴宁

六六 发表于 2023-8-9 16:36
沙发是我的，哈哈

哈，大沙发舒服不

婴宁

六六 发表于 2023-8-9 16:37
婴宁的音画也做的这么好啊，伴着嫩的歌声，图图越发有穿透感了

现成的代码，我就是根据自己需要换成喜欢的图片歌曲而已。

婴宁

念风 发表于 2023-8-9 17:08
婴宁的动画不赖呀，越来越好了

是代码好，哈。

婴宁

夜雨 发表于 2023-8-9 17:21
妞的图每一幅都给人美好的感觉。

先让自己视觉上舒服才行啊，根据歌曲配图。