红影 发表于 2022-9-14 11:24

日日楼中到夕阳（学习黑黑小球路径效果）

<style>
#papa{left:-242px;width:1080px;height:607px;background:tan url('https://pic.imgdb.cn/item/6321406416f2c2beb15feca6.jpg') no-repeat center/cover;box-shadow:3px 3px 20px #000;display:grid;place-items:center;position:relative;z-index:1}
#mplayer{position:absolute;left:490px;bottom:0;width:300px;height:80px;user-select:none;display:grid;place-items:center;cursor:pointer}
#mplayer:hover #btnwrap,#mplayer:hover #prog{transform:translateY(var(--yy))}
#mplayer:hover #btnwrap{background:linear-gradient(to top right,rgba(255,0,0,.45),rgba(0,255,0,.35));border-radius:50%;opacity:.75}
#btnwrap,#prog{position:absolute;display:grid;place-items:center;transition:.5s}
#btnwrap{--yy:-15px;width:40px;height:40px;transform:rotate(45deg);border:1px solid gray;border-radius:6px;opacity:.25}
#btnplay{width:20px;height:20px;background:rgba(255,255,255,.15);clip-path:polygon(0 0,0 100%,100% 50%)}
#btnpause{width:2px;height:20px;border-style:solid;border-width:0 4px;border-color:transparent rgba(255,255,255,.15);display:none}
#prog{--yy:20px;width:300px;height:16px;border-radius:10px;background:linear-gradient(90deg, rgba(255,0,0,.45), rgba(0,255,0,.35) 100%, transparent 0);border:1px solid gray;font:400 14px / 16px sans-serif;color:#999}
#lrc{position:absolute;bottom:90px;left:500px;font:700 2em sans-serif;color:transparent;letter-spacing:2px;background:linear-gradient(-90deg,#8b0000,gold,orange,snow) 100% 0 / 200% 100%;background-clip:text;-webkit-background-clip:text;animation:bgMerge 5s linear infinite}
.ball{--ss:0s;position:absolute;width:10px;height:10px;left:1px;top:0px;border-radius:50%;background:red;offset-distance:0;offset-path: path("M191 250 A183 97 0 1 1 557 250 A183 97 0 0 1 190 250z");animation:move 6s var(--ss) linear infinite}
@keyframes move{to{offset-distance:100%}}
@keyframes bgMerge{from{background-position:0 0}to{background-position:-100% 0}}
</style>
<div id=papa>
<div id=lrc>秋韵 - 古风纯音乐</div>
<div id=mplayer><div id=btnwrap><span id=btnplay></span><span id=btnpause></span></div>
<div id=prog>00:00 | 00:00</div>
</div></div>
<script>
let lrcAr = [
        ['0.00','秋韵 - 古风纯音乐'],
        ['180.00','感谢支持']
];
let aud = new Audio();
let setColor = () => Math.random().toString(16).substr(-6);
aud.src = 'https://music.163.com/song/media/outer/url?id=1337508787.mp3';
aud.autoplay = true;
aud.loop = true;

Array.from({length: 60}).forEach((ele,key) => {
        ele = document.createElement('span');
        ele.className = 'ball';
        ele.style.cssText += `--ss: ${key * 0.1}s; background: #${setColor()};`;
        papa.appendChild(ele);
});

btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
        prog.style.background= 'linear-gradient(130deg, rgba(0,0,255,.45), rgba(255,0,0,.35) ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';//prog.offsetWidth * aud.currentTime / aud.duration) + 'px 0px';
        prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
        for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
        }
});
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>

红影 发表于 2022-9-14 11:28

前两天黑黑讲述关于路径知识，除了心形，还有个椭圆形，拿椭圆形做个小珠吧，感谢黑黑代码{:4_187:}

红影 发表于 2022-9-14 11:29

我这里听不了音乐，去东篱大哥帖子里借用个，谢谢东篱大哥{:4_187:}

加林森 发表于 2022-9-14 11:31

红影制作得真漂亮。有创意！赞！{:4_199:}

马黑黑 发表于 2022-9-14 12:13

这个设计完美，无懈可击

东篱闲人 发表于 2022-9-14 13:19

红影 发表于 2022-9-14 11:28
前两天黑黑讲述关于路径知识，除了心形，还有个椭圆形，拿椭圆形做个小珠吧，感谢黑黑代码

高手，厉害！{:5_116:}

东篱闲人 发表于 2022-9-14 13:20

红影 发表于 2022-9-14 11:29
我这里听不了音乐，去东篱大哥帖子里借用个，谢谢东篱大哥

不客气，这就是秋的声音。俺找了很多个，觉得这个无可替代。。。

偶然~ 发表于 2022-9-14 13:53

厉害，唯美的文字，音乐古韵，播放器大气，我喜欢，辛苦啦。

红芍药 发表于 2022-9-14 14:13

影子聪明，制作得好看，还带滚动的。{:4_199:}{:4_204:}

梦缘 发表于 2022-9-14 17:13

老师的帖很漂亮，欣赏点赞！{:4_204:}

小辣椒 发表于 2022-9-14 18:32

亲爱的。。。特别棒，效果太美了{:4_178:}

小辣椒 发表于 2022-9-14 18:33

这个珠珠真听你的话，你让它咋转就咋转，亲爱的太厉害了{:4_178:}

绿叶清舟 发表于 2022-9-14 19:50

影厉害啊，效果真棒

红影 发表于 2022-9-14 20:31

加林森 发表于 2022-9-14 11:31
红影制作得真漂亮。有创意！赞！

谢谢队长鼓励{:4_187:}

红影 发表于 2022-9-14 20:32

马黑黑 发表于 2022-9-14 12:13
这个设计完美，无懈可击

你做了心形和椭圆形两种路径啊，心形的你已经做帖子了，不能浪费了另一个{:4_173:}

红影 发表于 2022-9-14 20:33

东篱闲人 发表于 2022-9-14 13:19
高手，厉害！

只是套用啊，有什么厉害{:4_173:}

红影 发表于 2022-9-14 20:34

东篱闲人 发表于 2022-9-14 13:20
不客气，这就是秋的声音。俺找了很多个，觉得这个无可替代。。。

我单位的网根本听不了音乐，没法去找歌曲，就直接去搬了东篱大哥帖子里的音乐，谢谢啊{:4_187:}

红影 发表于 2022-9-14 20:34

偶然~ 发表于 2022-9-14 13:53
厉害，唯美的文字，音乐古韵，播放器大气，我喜欢，辛苦啦。

谢谢偶然君，只是跟在后面学习代码呢{:4_173:}

红影 发表于 2022-9-14 20:35

红芍药 发表于 2022-9-14 14:13
影子聪明，制作得好看，还带滚动的。

谢谢芍药姑娘，也只是套用代码而已呢{:4_187:}

红影 发表于 2022-9-14 20:36

梦缘 发表于 2022-9-14 17:13
老师的帖很漂亮，欣赏点赞！

多谢梦缘，只是跟着后面学呢{:4_173:}
页: [1] 2 3
查看完整版本: 日日楼中到夕阳（学习黑黑小球路径效果）