不是不在乎
<style>
#papa { left: -250px; width: 1100px; height: 700px; box-shadow: 3px 3px 20px #000; background: lightblue url('https://pic1.imgdb.cn/item/63340a8016f2c2beb11d58b1.jpg') no-repeat center/cover; user-select: none; position: relative; z-index: 2; }
#btnwrap { position: absolute; left: calc(50% - 80px); bottom: 20px;left: 25px;width: 100px; height: 100px; display: grid; place-items: center; }
#btnwrap span { position: absolute; transition: all 1.2s; }
#h5player { width: 90px; height: 90px; border-radius: 50%; background: #46ffad; conic-gradient(from 0deg, #1ef3e9, #065a96, #1ef3e9 1%, snow 0); mask: radial-gradient(transparent 60%, #1ef3e9 61%, #1ef3e9 0); -webkit-mask: radial-gradient(transparent 60%, red 61%, red 0); }
#btnplay { left: 15px; width: 20px; height: 20px; background: #46ffad; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
#btnplay:hover { background: tomato; }
#btnpause { left: 20px; width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; cursor: pointer; }
#btnpause:hover{ border-color: transparent tomato; }
#tmsg { left: 40px; font: normal 16px sans-serif; color: #ddd; }
#lrctext { position: absolute; left: calc(50% + 30px); 140px; bottom: 50px; left: 135px; font: bold 1.5em sans-serif; color: #46ffad; text-shadow: 1px 1px 1px #128e70; transition: 1.2s; }
#lrctext:hover, #tmsg:hover { color: orange; }
</style>
<div id="papa">
<div id="btnwrap">
<span id="h5player"></span><span id="btnplay"></span><span id="btnpause"></span>
<span id="tmsg">00:00<br>00:00</span>
</div>
<div id="lrctext">不是不在乎 - 乌燕</div>
</div>
<script>
let aud = new Audio();
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
aud.src = 'http://music.163.com/song/media/outer/url?id=484311782.mp3';
aud.autoplay = true;
aud.loop = true;
btnplay.onclick = () => aud.play();
btnpause.onclick = () => aud.pause();
h5player.onmousemove = (e) => h5player.style.cursor =isHover(e.offsetX, e.offsetY) ? 'pointer' : 'default';
h5player.onclick = (e) => {
if (isHover(e.offsetX, e.offsetY)) {
let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
aud.currentTime = aud.duration * deg / 360;
}
}
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
tmsg.innerHTML = toMin(aud.currentTime) + '<br>' + toMin(aud.duration);
h5player.style.background = 'conic-gradient(from 0deg, #1ef3e9, #065a96, #1ef3e9 ' + aud.currentTime / aud.duration * 100 + '%, #46ffad 0)';
for (j = 0; j < lrcAr.length;j ++) {
if (aud.currentTime >= lrcAr) lrctext.innerHTML = lrcAr;
}
});
let isHover = (x,y) => Math.pow(x - 50, 2) + Math.pow(y - 50, 2) >= Math.pow(40, 2);
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script> 清舟的图很有表现力，作业也完成的美{:4_187:} 千羽 发表于 2022-9-28 20:58
清舟的图很有表现力，作业也完成的美
看到这几个字好玩就拿来做了 绿叶清舟 发表于 2022-9-28 21:02
看到这几个字好玩就拿来做了
正向说你排字好看呢{:4_173:} 想去那个视频，就是这样的{:5_117:}老喜欢这色彩了，清舟制作很有感觉！ 真棒！
{:4_204:}{:4_199:} 大猫咪 发表于 2022-9-28 21:07
想去那个视频，就是这样的老喜欢这色彩了，清舟制作很有感觉！ 真棒！
中间那个高亮部分就是用了相当滤镜的，在PS里改变的图层模式 千羽 发表于 2022-9-28 21:04
正向说你排字好看呢
抠来的字了，就是看到这几个字去搜的歌 好几张图片PS的吧 清舟的帖子配色好奇妙{:4_199:} 大猫咪 发表于 2022-9-28 21:16
好几张图片PS的吧
这里就用了二张，不过二个角上的图片是一张被俺撕开了用的{:4_189:} 绿叶清舟 发表于 2022-9-28 21:22
这里就用了二张，不过二个角上的图片是一张被俺撕开了用的
厉害会制作真好{:5_117:}想用什么做什么 红影 发表于 2022-9-28 21:16
清舟的帖子配色好奇妙
眼馋不，PS的功能啊{:4_173:} 清舟这个图图意境美美的{:4_199:} 哈哈~~清舟这歌也是煽情的歌曲，好听，图意特别相符 大猫咪 发表于 2022-9-28 21:23
厉害会制作真好想用什么做什么
不难啊，以后俺把制作过程来分享一下，看了就知道了 绿叶清舟 发表于 2022-9-28 21:34
不难啊，以后俺把制作过程来分享一下，看了就知道了
嗯嗯 好的{:4_204:} 小辣椒 发表于 2022-9-28 21:28
哈哈~~清舟这歌也是煽情的歌曲，好听，图意特别相符
现在的天气正适合煽一下的了{:4_189:} 绿叶清舟 发表于 2022-9-28 21:35
现在的天气正适合煽一下的了
哈哈····清舟约起来{:4_170:} 绿叶清舟 发表于 2022-9-28 21:25
眼馋不，PS的功能啊
眼馋，但不学了，学不会那东西{:4_173:} 小辣椒 发表于 2022-9-28 21:37
哈哈····清舟约起来
先约你了{:4_189:}