写在风中的信 （学习老黑“时间”制作）
本帖最后由 加林森 于 2022-9-10 16:45 编辑 <br /><br /><style>#papa { left:-214 width: 1024px; height: 576px; background: #444 url('https://pic.imgdb.cn/item/631bf97c16f2c2beb191476b.jpg') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#mplayer { position: absolute; 80px;}
#tmsg { font: normal 1em sans-serif; fill: #ccc; }
#lrc { position: absolute; left: 510px;top: 320px; font: bold 2em sans-serif; letter-spacing: 3px; animation: mov 20s linear infinite alternate; }
@keyframes mov { to { left:305px; } }
</style>
<div id="papa">
<svg id="mplayer" viewBox="0 0 100 100" width="100" height="100">
<circle id="track" cx="50" cy="50" r="45" fill="none" stroke="snow" stroke-width="6" style="cursor: pointer" />
<line id="hand" x1="50" y1="50" x2="50" y2="10" stroke="red" stroke-width="1" />
<circle cx="50" cy="50" r="4" fill="red" />
<path id="curPath" d="M 10 60 Q 50 0 90 60" fill="none" stroke="none"/>
<path id="durPath" d="M 0 38 Q 50 100 100 38" fill="none" stroke="none"/>
<g id="tmsg">
<text x="52%" y="0"><textPath id="curMsg" xlink:href="#curPath" text-anchor="middle" dominant-baseline="text-after-edge">00:00</textPath></text>
<text x="60%" y="0"><textPath id="durMsg" xlink:href="#durPath" text-anchor="middle" dominant-baseline="text-before-edge">00:00</textPath></text>
</g>
<circle id="btnplay" cx="50" cy="50" r="35" fill="transparent" style="cursor: pointer" />
</svg>
<svg id="lrc" width="305" height="420">
<text id="lrctxt" x="50%" y="30" fill="#008080" stroke="#20B2AA" text-anchor="middle" dominant-baseline="middle">写在风中的信</text>
</svg>
</div>
<script>
let cc = { x: 1*track.getAttribute('cx'), y: 1*track.getAttribute('cy'), };
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=399347079.mp3';
aud.autoplay = true;
aud.loop = true;
aud.addEventListener('timeupdate', () => {
let progress = aud.currentTime * 360 / aud.duration;
hand.setAttribute('transform', 'rotate(' + progress +', 50, 50)');
curMsg.textContent = toMin(aud.currentTime);
durMsg.textContent = toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrctxt.textContent = lrcAr;
}
});
track.onclick = (e) => {
let angle = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;
angle+= (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;
aud.currentTime = aud.duration * angle / 360;
}
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
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>
@马黑黑 基本是简单模仿。动画设计修改了行程距离，没有相应修改运行时间，显得有些卡壳、呆滞。这是基本的CSS配套，有 @keyframes 动画，有 animation 调用，二者根据设置彼此配合。 马黑黑 发表于 2022-9-10 11:46
基本是简单模仿。动画设计修改了行程距离，没有相应修改运行时间，显得有些卡壳、呆滞。这是基本的CSS配套 ...
好的，我去调整。 加林森 发表于 2022-9-10 11:48
好的，我去调整。
尽量避免简单模仿，加入自己的元素，而不是更改一两处代码 马黑黑 发表于 2022-9-10 12:10
尽量避免简单模仿，加入自己的元素，而不是更改一两处代码
嗯嗯。谢谢！ 加林森 发表于 2022-9-10 12:13
嗯嗯。谢谢！
学习有个模仿的过程，但模仿一段时间之后，应该在模仿的基础上有所创新。永远的模仿不会有进步。 马黑黑 发表于 2022-9-10 12:17
学习有个模仿的过程，但模仿一段时间之后，应该在模仿的基础上有所创新。永远的模仿不会有进步。
现在头有点晕了。等会再研究了。 队长求速度了{:4_170:} 加林森 发表于 2022-9-10 12:22
现在头有点晕了。等会再研究了。
所以建议不要图快，好好消化，夯实基础 图中的秒针挺有意思的。 这个做得还是挺漂亮的，欣赏队长好帖{:4_204:} 欣赏老师的精彩分享，问好老师，祝您双节快乐幸福！{:4_204:} 小辣椒 发表于 2022-9-10 12:28
队长求速度了
就是就是。 马黑黑 发表于 2022-9-10 13:15
所以建议不要图快，好好消化，夯实基础
好的好的。 梦油 发表于 2022-9-10 13:24
图中的秒针挺有意思的。
就是。挺好玩的。 红影 发表于 2022-9-10 15:01
这个做得还是挺漂亮的，欣赏队长好帖
还行吧。 梦缘 发表于 2022-9-10 15:26
欣赏老师的精彩分享，问好老师，祝您双节快乐幸福！
谢谢梦缘。双节快乐！ 加林森 发表于 2022-9-10 16:48
好的好的。
大过节的，我也直话直说哈 马黑黑 发表于 2022-9-10 17:07
大过节的，我也直话直说哈
应该的，我该感谢你！
页:
[1]
2