那个恰似圆月的播放器，设计的位置恰到好处。
这个色彩真漂亮，歌曲真好听，虽然粤语歌词比较难懂，但不妨碍歌曲好听{:4_187:}
本帖最后由 加林森 于 2022-8-3 17:04 编辑 <br /><br />东篱闲人 发表于 2022-6-5 10:20
位置对了，就是不要让叶倩文离加加太远。。。
还是有点距离好点。。。。{:4_189:}
<style>
#papa { left: -214px; width: 1024px; height: 600px; display: grid; place-items: center; background: gray url('https://s1.ax1x.com/2022/08/03/vVL0O0.jpg') no-repeat center/cover; box-shadow: 3px 3px 26px #000; position: relative; }
#papa div, #papa img, #papa span { position: absolute; }
#mama { width: 400px; height: 400px; left: calc(50% - 200px); top: calc(50% - 200px); background: radial-gradient(at 40% 30%, snow, transparent); border-radius: 50%; display: grid; place-items: center; }
#disc { right: calc(50% - 30px); top: calc(50% - 30px); width: 60px; height: 60px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; opacity: 0; cursor: pointer; animation: rot 2s linear infinite; }
#mpic { width: 300px; height: 211px; right: calc(50% - 150px); bottom: calc(50% - 105px); opacity: 0; }
#tit { font: bold 2em/2.4em sans-serif; color: #6795ac; text-shadow: 1px 1px 2px rgba(0,0,0,.75); opacity: 0; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<div id="disc"></div>
<img id="mpic" src="https://s1.ax1x.com/2022/08/03/vZMwcj.png" alt="" />
<div id="mama"><span id="tit">巫娜 : 云山夜雨</span></div>
</div>
<script>
let idx = 0, aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=38679067.mp3';
aud.loop = true;
aud.autoplay = true;
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
let TT = setTimeout(change,3000);
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');
function change() {
let aniAr = [
,
,
,
,
,
,
,
,
,
,
,
,
];
let ele = aniAr;
ele.style.transition = 'all 3s';
ele.style.cssText += aniAr;
idx ++;
idx <= aniAr.length - 1 ? TT = setTimeout(change, 3000) : clearTimeout(TT);
}
</script>
梦油 发表于 2022-6-5 10:37
那个恰似圆月的播放器，设计的位置恰到好处。
是啊
红影 发表于 2022-6-5 11:03
这个色彩真漂亮，歌曲真好听，虽然粤语歌词比较难懂，但不妨碍歌曲好听
这首歌曲是老歌曲了。
加林森 发表于 2022-6-5 11:44
是啊
一轮明月配上五彩斑斓的花卉真是美不胜收。
梦油 发表于 2022-6-5 11:51
一轮明月配上五彩斑斓的花卉真是美不胜收。
是的，很美丽吧。
加林森 发表于 2022-6-5 11:44
这首歌曲是老歌曲了。
没听过的对我来说都是新的{:4_173:}
红影 发表于 2022-6-5 12:12
没听过的对我来说都是新的
嗯嗯，是我们那个年代的歌曲了。大约是八十年代的歌曲。
加林森 发表于 2022-6-5 12:02
是的，很美丽吧。
是的，你设计的很协调。
梦油 发表于 2022-6-5 13:03
是的，你设计的很协调。
制作音画就必须这样的。
加林森 发表于 2022-6-5 13:53
制作音画就必须这样的。
这也是功夫啊。
梦油 发表于 2022-6-5 16:47
这也是功夫啊。
基本功吧。
加林森 发表于 2022-6-5 16:48
基本功吧。
是啊，加林森朋友的基本功还是很扎实的啊。
梦油 发表于 2022-6-5 17:00
是啊，加林森朋友的基本功还是很扎实的啊。
三十多年了哦。{:5_117:}
加林森 发表于 2022-6-5 17:03
三十多年了哦。
十分了得啊！
梦油 发表于 2022-6-5 17:35
十分了得啊！
还是一般一般
这个按钮当月亮，夜景很美{:4_199:}
队长现在字体多变了，这个是什么字体我都不晓得{:4_173:}
小辣椒 发表于 2022-6-5 20:55
这个按钮当月亮，夜景很美
嗯嗯。{:4_204:}