刘恋&王啸坤《来，走 (Live)》
本帖最后由 杨帆 于 2025-1-13 20:02 编辑 <br /><br /><style>@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
/** 歌词同步的设置，不满意可以调整下 */
.lrcShow {--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
position: absolute;z-index: 6;
left:75%;
transform: translate(-50%);
top: 90%;
pointer-events: none;
font:normal 3em 华文新魏;
font-weight:200;
color: #228B22;
white-space: pre;
-webkit-background-clip: text;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
.lrcShow::before {pposition: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
pointer-events: none;
overflow: hidden;
white-space: pre;
background: var(--bg);
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
@keyframes cover1{0% { width: 0%;transform:rotateY(0deg)scale(1)}100% { width: 100%;transform:rotateY(0deg)scale(1);filter:hue-rotate(360deg)}}
@keyframes cover2 { 0% { width: 0%;transform:rotateY(0deg)scale(1)}100% { width: 100%;transform:rotateY(0deg)scale(1);filter:hue-rotate(360deg)}}
#mydiv { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 788px; background: url('https://pic.imgdb.cn/item/676aa77cd0e0a243d4e96aab.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; overflow: hidden;z-index: 1; display: grid; place-items: center; position: relative; --state: running; }
#msvg {
top:8%;
right:6%;
width: 58px;
height: 58px;
filter: drop-shadow(0 0 1px #8A2BE2);
position: absolute;
pointer-events: auto;
animation: rot 8s linear infinite var(--state);
cursor: pointer;
pointer-events: auto;
}
#msvg > span {
position: absolute;
left: -60%;
top: -60%;
width: 90%;
height: 90%;
background: linear-gradient(75deg,#7CFC00,#ADFF2F,#32CD32, #FFD700);
border-radius: 95% 0%;
transform-origin: 100% 100%;
transform: rotate(var(--deg)) translateY(53px);
}
#msvg > span:nth-of-type(1) { --deg: 0deg; }
#msvg > span:nth-of-type(2) {--deg: 72deg;}
#msvg > span:nth-of-type(3) { --deg: 144deg;}
#msvg > span:nth-of-type(4) {--deg: 216deg;}
#msvg > span:nth-of-type(5) {--deg: 288deg;}
@keyframes rot { to { transform: rotate(1turn); } }
#msvg:hover { filter: drop-shadow(0 0 60px Gold); }
#vid1{ position: absolute; width: 120%; height: 120%; left:-20px; top:-90px; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
#vid2{ position: absolute; width: 120%; height: 120%; left:-20px; top:-90px; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
#vid3{ position: absolute; width: 550px; height: 600px; left: 3%;top:5%; object-fit: cover; aspect-ratio: 1; border-radius: 50%;-webkit-mask: radial-gradient(circle, cyan, cyan,rgba(0,0,0,.35),transparent, transparent); }
#fullscreen { position: absolute; top:3%; left:3%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 1; cursor: pointer; z-index: 10}
@keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes move { to { offset-distance: 100%;} }
@keyframes rot { to { transform: rotate(-360deg); } }
</style>
<div id="mydiv">
<video id="vid1" src="https://img.tukuppt.com/video_show/3664703/00/02/02/5b4f05355f6a8.mp4" autoplay loop muted></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/15653652/04/06/21/646b0add8b43e.mp4" autoplay loop muted></video>
<video id="vid3" src="https://cccimg.com/view.php/64b4c0f29e23d111156634bcbe7d1bc9.mp4" autoplay loop muted></video>
<div id="msvg">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="lrcShow" data-lrc="刘恋&王啸坤《来，走 (Live)》" >刘恋&王啸坤《来，走 (Live)》
</div>
<span id="fullscreen">全屏观赏</span>
</div>
<scripttype="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('msvg');
var tt = 9, r1 = 150, r2 = 140, deg = 360 / tt, rad = Math.PI / 180 * deg, pstr = 'M150 150';
var stop = `
<stop offset="0" stop-color="yellow" />
<stop offset="1" stop-color="cyan" />
`;
for(var i = 0; i < tt; i ++) {
var x = r1 + r2 * Math.cos(rad * i), y = r1 + r2 * Math.sin(rad * i);
pstr += `A60 30 ${deg * i} 0 0 ${x.toFixed(2)} ${y.toFixed(2)}A60 30 ${deg * i} 1 0 ${r1} ${r1}`;
}
var sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
sf0.charset = "utf-8";
document.body.appendChild(sf0);
sf0.onload = () => {
let lrctxt = `
来，走 (Live) - 刘恋
词：刘恋
曲：刘恋
音乐总监：刘卓
音响总监：张小年
制作人：刘卓
音乐统筹：郎梓朔
编曲：孙赫呈
现场乐队：VBand
钢琴：傅一峥
键盘：孙维峰
吉他：董珂铭/王海洋
鼓：邓华龙
贝斯：杨琪
合音：关晓林/石行/邢晏侨
电脑工程：岳义
音频编辑：石行
混音：黄可爱
刘恋：
日落你来 日出你走
疯了就爱 醒了松手
我们是流浪的野火
不适合躺进火柴盒
王啸坤：
灯火里来 阑珊里走
落花又开 流水当酒
我们只偶尔地相拥
求一个诗意的纵容
合：
谁爱这 宇宙过期的永久
五指相扣的牢笼
哦拜托 别用爱逮捕我
来就大方往前走
走就利落不回头
来快走 别堵塞我的自由
刘恋：
直白地爱 坦白地走
不必瞎猜 不必不朽
在深情过头的地球
偏爱你赤裸的凉薄
王啸坤：
有人会来 有人会走
走入高楼 走入洪流
在某个短暂的路口
我们认真地诱惑
合：
谁爱这 宇宙过期的永久
五指相扣的牢笼
哦拜托 别用爱逮捕我
来就大方往前走
走就利落不回头
来快走 别堵塞我的自由
刘恋：
你来的时候 宇宙轻微颤抖
春水流过 升温 翻腾 煮熟清梦
王啸坤：
你走的时候
还我一夜酒红
与半两自由
刘恋：
烟火人间 重归烟火
漂泊之心 再次漂泊
王啸坤：
谁爱这宇宙过期的永久
五指相扣的牢笼
哦拜托 别用爱逮捕我
（ 刘恋：Oh 别用爱逮捕我）
来就大方往前走 走就利落不回头
来快走 别堵塞我的自由
（刘恋：Oh 别堵塞我的自由）
我的自由
我的自由
我的自由
`;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://cccimg.com/view.php/6af5b09e1b111e8461a77c3957d400b9.mp3",
}
let player = new lrcPlayerY(opts);
msvg.onclick = () => {
msvg.style.setProperty('--state', ['paused','running'][+player.mObj.paused]);
player.mObj.paused ? (player.mObj.play(), vid1.play(), vid2.play(), vid3.play(),plane1.play(), plane2.play()) : (player.mObj.pause(), vid1.pause(),vid2.pause(),vid3.pause(),plane1.stop(),plane2.stop());
};
player.mObj.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
}
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',mydiv.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 起个网名好难 发表于 2024-12-25 14:56
谢谢老师鼓励与支持
我看到有年轻人推荐，就做了这个帖子 问好楼主，首先感谢集中分享 有点小建议，画面上这个转盘的播放器可以改小一点吗？。这么大感觉画面有点占地方了，个人看法，不知妥不妥 世外桃源 发表于 2024-12-25 17:27
有点小建议，画面上这个转盘的播放器可以改小一点吗？。这么大感觉画面有点占地方了，个人看法，不知妥不妥
谢谢世外桃源友友支持与鼓励{:4_191:}
感谢您给出很好的建议，我也有同感，有空我再试一试
很漂亮的意境，视频也很恰当。
欣赏杨帆好帖{:4_187:} 问候老师好！精美音画佳作，精心制作分享！为您点赞！{:5_108:}{:5_116:}{:4_187:} 世外桃源 发表于 2024-12-25 17:27
有点小建议，画面上这个转盘的播放器可以改小一点吗？。这么大感觉画面有点占地方了，个人看法，不知妥不妥
变小效果不佳，将其作了边缘化处理。此外，加了一个视频 红影 发表于 2024-12-25 19:36
很漂亮的意境，视频也很恰当。
欣赏杨帆好帖
谢谢影子鼓励与支持，根据世外桃源朋友建议，作了简单处理 秋思梦景 发表于 2024-12-25 20:44
问候老师好！精美音画佳作，精心制作分享！为您点赞！
问好友友，谢谢鼓励与支持 欣赏杨帆的精彩制作，效果特别好{:4_199:} 杨帆 发表于 2024-12-25 20:57
谢谢影子鼓励与支持，根据世外桃源朋友建议，作了简单处理
好像加了视频演唱有点喧宾夺主了点{:4_204:} 小辣椒 发表于 2024-12-25 22:45
欣赏杨帆的精彩制作，效果特别好
问好小辣椒，谢谢鼓励与支持{:4_204:} 本帖最后由 杨帆 于 2024-12-26 14:59 编辑
红影 发表于 2024-12-25 23:33
好像加了视频演唱有点喧宾夺主了点
主题是歌词及音乐，这个演唱视频及其余背景用来烘托氛围 世外桃源 发表于 2024-12-25 17:27
有点小建议，画面上这个转盘的播放器可以改小一点吗？。这么大感觉画面有点占地方了，个人看法，不知妥不妥
换了一个小点的控制按钮 杨帆 发表于 2024-12-26 12:17
主题是歌词及音乐，这个演唱视频及其余背景用来烘托氛围
这首歌有点洒脱得过头了，根本不要什么天长地久啊{:4_173:} 红影 发表于 2024-12-26 20:28
这首歌有点洒脱得过头了，根本不要什么天长地久啊
是啊，不懂现在年轻人的恋爱观 杨帆 发表于 2024-12-26 12:09
问好小辣椒，谢谢鼓励与支持
杨帆晚上好，不客气哦{:4_187:} 制作精彩，这声音好听
页:
[1]
2