Because Of You - Kelly Clarkson TO：冬天的雨（学习黑黑寂静之声播放器效果）
<style>#papa { left:-344px; width: 1280px; height: 700px; top:150px; background: gray url('https://wj.zp68.com/lxx/yunhua/2022/11/02/01.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#mplayer { position: absolute; top: 20px; left: calc(50% - 60px); display: grid; place-items: center; }
#btnplay { position: absolute; width: 40px; height: 20px; left: 50%; top: 50%; background: hsla(240,30%,80%,.6); border-radius: 0 100%; transform-origin: 0 0; cursor: pointer; animation: rot linear 4s infinite; animation-play-state: paused; }
#btnplay::before, #btnplay::after { position: absolute; width: 100%; height: 100%; content: ''; background: inherit; border-radius: inherit; transform-origin: 0 0; transform: rotate(120deg); }
#btnplay::after { transform: rotate(240deg); }
#tmsg { fill: hsla(0,20%,100%,0.55); font: normal 1em sans-serif; }
#ball { position: absolute; left: 100px; top: 50px; width: 500px; height: 300px;transform: translateZ(20px);}
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<div id="wrapper"><img id="ball" src="https://wj.zp68.com/lxx/yunhua/2022/11/02/ldd.gif" alt="" /></div>
<div id="mplayer">
<span id="btnplay"></span>
<svg id="msvg" width="120" height="120" shape-rendering="geometricPrecision">
<g id="mama" transform="rotate(-90, 60, 60)" style="cursor: pointer;">
<circle id="track" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="hsla(0,0%,90%,0.55)" />
<circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="hsla(120,30%,20%,.75)" />
</g>
<path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/>
<path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/>
<g id="tmsg">
<text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text>
<text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text>
</g>
</svg>
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2022/11/02/01.mp3" autoplay loop>audio api</audio>
</div>
<script>
(function() {
let cc = { x: 1*track.getAttribute('cx'), y: 1*track.getAttribute('cy'), len: track.getTotalLength(), };
prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('seeked', () => aud.play());
mama.onclick = (e) => {let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime = aud.duration * deg / 360;};
aud.addEventListener('pause', () => mState());
aud.addEventListener('play',() => mState());
aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration + 'px';curMsg.textContent = toMin(aud.currentTime);durMsg.textContent = toMin(aud.duration);});
let mState = () => btnplay.style.animationPlayState = aud.paused ? 'paused' : 'running';
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;};
(function() {for(j=0; j<30; j++) {let leaf = document.createElement('span');leaf.style.cssText = `position: absolute;width: 40px;height: 20px;background: hsla(120,0%,100%,.25) linear-gradient(135deg,hsla(240,100%,50%,.35),hsla(60,100%,50%,.45));border-radius: 0 100%;transform: rotate(${Math.random() * 360}deg);left: ${Math.random() * 960}px;top: ${Math.random() * 700}px;`;papa.appendChild(leaf);}})();
}());
</script>
<br><br><br><br><br><br><br><br><br><br><br><br> @马黑黑
黑黑学习套用一个{:4_173:}
https://pic1.imgdb.cn/item/636242a316f2c2beb1c459d9.jpg
Because Of You - Kelly Clarkson---歌词大意
I will not make the same mistakes that you did
我不会重复你犯过的错误
I will not let myself Cause my heart so much misery
我不会让自己的心承受如此痛苦
I will not break the way you did,
我不会破坏你选择的方式
You fell so hard
你吃尽苦头
I ve learned the hard way
我也已经知道痛苦的滋味
so never let it get that far
所以我不会让自己一错再错
Because of you
因为你
I never stray too far from the sidewalk
我从来都不会偏离常轨
Because of you
因为你
I learned to play on the safe side so I don t get hurt
我学会站在安全的一方以免自己受到伤害
Because of you
因为你
I find it hard to trust not only me, but everyone around me
我发现很难去相信自己以及我身边的每一个人
Because of you
因为你
I am afraid
我害怕
I lose my way ，And it s not too long before you point it out
在你指出道路的不久前，我迷失了方向
I cannot cry
我不能哭
Because I know that's weakness in your eyes
因为我知道这在你眼里是软弱的表现
I m forced to fake a smile, a laugh everyday of my life
在生活中的每一天我被迫强颜欢笑
My heart can't possibly break
我的心可能早已破碎
When it wasn't even whole to start with
甚至在最初之时就不再完整
Because of you
因为你
I never stray too far from the sidewalk
我从来都不会偏离常轨
Because of you
因为你
I learned to play on the safe side so I don t get hurt
我学会站在安全的一方以免自己受到伤害
Because of you
因为你
I find it hard to trust not only me, but everyone around me
我发现很难去相信自己以及我身边的每一个人
Because of you
因为你
I am afraid
我害怕
I watched you die
我看到你日渐憔悴
I heard you cry every night in your sleep
每晚，我都听见你在睡梦中哭泣
I was so young
我当时太小
You should have known better than to lean on me
你早该知道而不是还依赖于我
You never thought of anyone else
你从来不考虑别人的感受
You just saw your pain
你只在乎自己的痛苦
And now I cry in the middle of the night for the same damn thing
如今我亦因为同样的事情在深夜里哭泣
Because of you
因为你
I never stray too far from the sidewalk
我从来都不会偏离常轨
Because of you
因为你
I learned to play on the safe side so I don t get hurt
我学会站在安全的一方以免自己受到伤害
Because of you
因为你
I try my hardest just to forget everything
我尽我最大努力去忘掉一切
Because of you
因为你
I don t know how to let anyone else in
我不知道如何去接纳别人
Because of you
因为你
I m ashamed of my life because it s empty
我为我的生命如此空虚而感到羞愧
Because of you
因为你
I am afraid
我害怕
Because of you
因为你
Because of you
因为你
加入粒子是的整体效果更加惊艳 @冬天的雨
失踪也是有一段时间了，发一首你曾经最喜欢的歌曲{:4_170:} 歌词同步没有？ 马黑黑 发表于 2022-11-2 21:14
加入粒子是的整体效果更加惊艳
黑黑，今天有点迟了，做个曾经冬雨最喜欢的歌曲，顺便呼叫一下{:4_170:} 这个没有做歌词同步所以我也是秒做了 小辣椒 发表于 2022-11-2 21:16
黑黑，今天有点迟了，做个曾经冬雨最喜欢的歌曲，顺便呼叫一下
这歌很经典的 马黑黑 发表于 2022-11-2 21:16
歌词同步没有？
这个没有上去，今天做了2个帖，赶时间的 小辣椒 发表于 2022-11-2 21:18
这个没有上去，今天做了2个帖，赶时间的
{:4_181:} 这个漂亮，亲爱的真快啊，又快又好，厉害{:4_199:} 马黑黑 发表于 2022-11-2 21:18
这歌很经典的
是的，冬雨分享过的，今天拿出来重新做一次 马黑黑 发表于 2022-11-2 21:21
那个也是事发了{:4_173:} 红影 发表于 2022-11-2 21:27
这个漂亮，亲爱的真快啊，又快又好，厉害
亲爱的，没有歌词是快的，套用一下的 小辣椒 发表于 2022-11-2 21:31
是的，冬雨分享过的，今天拿出来重新做一次
百听不厌 马黑黑 发表于 2022-11-2 21:32
百听不厌
是的，我也是很喜欢的 小辣椒 发表于 2022-11-2 21:32
那个也是事发了
很厉害呢，小辣椒你真是棒棒滴 小辣椒 发表于 2022-11-2 21:33
是的，我也是很喜欢的
好歌总是单曲循环{:4_170:} 马黑黑 发表于 2022-11-2 21:33
很厉害呢，小辣椒你真是棒棒滴
哈哈~~~都是玩过的音乐，套用黑黑的也是速度的
页:
[1]
2