粉色爱情海

醉美水芙蓉 发表于 2022-11-2 22:50

本帖最后由醉美水芙蓉于 2022-11-2 23:27 编辑 <br /><br /><style>
#papa { left:-344px; width: 1280px; height: 700px; top:30px; background:url('https://wj1.zp68.com:812/lxx/yunhua/2022/11/02/ldd.gif')0 0/20%20%, url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e1ec8b701c072c613179a028b56acdde.jpg') no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000;
position: relative;
z-index: 1;
}
#mplayer { position: absolute; top: 550px; left: calc(50% 600px); 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://music.163.com/song/media/outer/url?id=1883998613.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>

醉美水芙蓉 发表于 2022-11-2 22:54

作词 : Youngior
作曲 : Youngior
编曲：BECU
后期：Youngior
封面：Mx
意境型歌曲（旋律、歌词）
PINK SEA OF LOVE（逐渐朦胧的感受，戴上耳机）
我见过粉色蓝色紫色没有
你的世界周围逐渐暗淡变成黑白色
我晕开你的迷人微笑嘴角
慢慢上扬始终弥漫柔情调成七彩色
你是调色板上凌乱美
所有未知颜色你勾兑 ye
我用画笔画艘小船之后涂上白色做
个幽灵船长寻找那片寂静海岸

我从未见过这样的女孩
鼻子嗅嗅追到你门外
我眉毛挑起天边的云彩
陪你藏在夏夜的Moonlight
忽然一声惊雷落下来
凌晨三点的梦最意外
梦成碎片不想醒过来
陪你沉沦粉色爱情海

蓝色的梦
灰色的空
陷入黑洞
朦胧的形容
棕色DE梧桐
粉色DE樱空
画面ZAI流动
再次陷入梦境之中

蓝色的梦
灰色的空
陷入黑洞
朦胧的形容
棕色DE梧桐
粉色DE樱空
画面ZAI流动
再次陷入梦境之中

人送外号 Dream Dog
Bad Puusy fxxk it 绕
今天出门忘吃药
I am take it and more被我盯上别想逃
keep up with her，check it out
问个清楚 Whats wrong
I'm in love with you now

始终看不清的是你朦胧容貌
闭上双眼感觉在我周围周围环绕
我已经忘不掉是你给的微笑
隔着彼岸能够注视你我就好

我从未见过这样的女孩
鼻子嗅嗅追到你门外
我眉毛挑起天边的云彩
陪你藏在夏夜的Moonlight
忽然一声惊雷落下来
凌晨三点的梦最意外
梦成碎片不想醒过来
陪你沉沦粉色爱情海

蓝色的梦
灰色的空
陷入黑洞
朦胧的形容

棕色DE梧桐
粉色DE樱空
画面ZAI流动
再次陷入梦境之中

蓝色的梦
灰色的空
陷入黑洞
朦胧的形容

棕色梧桐
粉色樱空
画面ZAI流动
再次陷入梦境之中

我从未见过这样的女孩
鼻子嗅嗅追到你门外
我眉毛挑起天边的云彩
陪你藏在夏夜的Moonlight
忽然一声惊雷落下来
凌晨三点的梦最意外
梦成碎片不想醒过来
陪你沉沦粉色爱情海

红影发表于 2022-11-2 22:55

漂亮，水芙蓉真棒，随机叶子的颜色调得很漂亮{:4_187:}

马黑黑 发表于 2022-11-2 23:08

这个GIF图片的使用，粒子效果非常理想。帖子制作精美，就差个歌词同步了

马黑黑 发表于 2022-11-2 23:09

帖子无法评分，评分链接被覆盖了

醉美水芙蓉 发表于 2022-11-3 06:37

红影发表于 2022-11-2 22:55
漂亮，水芙蓉真棒，随机叶子的颜色调得很漂亮

谢谢红影美女鼓励！

醉美水芙蓉 发表于 2022-11-3 06:39

马黑黑发表于 2022-11-2 23:08
这个GIF图片的使用，粒子效果非常理想。帖子制作精美，就差个歌词同步了

很惭愧！老师的播放器加歌词同步我还没有研究出来？

马黑黑 发表于 2022-11-3 07:18

醉美水芙蓉发表于 2022-11-3 06:39
很惭愧！老师的播放器加歌词同步我还没有研究出来？

少量改动就好，但要有点CSS、JS基础，配套HTML标签。

红影发表于 2022-11-3 08:31

醉美水芙蓉发表于 2022-11-3 06:37
谢谢红影美女鼓励！

我昨天也是无法评分，现在可以了{:4_187:}

页: [1]

花潮论坛's Archiver

粉色爱情海