论坛 › 音乐沙龙 › 你像三月桃花开

起个网名好难 发表于 2024-4-8 21:57

你像三月桃花开

本帖最后由 起个网名好难 于 2024-4-15 07:41 编辑 <br /><br /><meta name="referrer" content="never" />
<link rel="stylesheet" href="https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css"charset="utf-8">
<style>
#oBlk {
    width: 1280px;
    height: 800px;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 4px 4px 10px black;
    margin-left: calc(50% - 721px);
}

#bfctl {
    bottom: 3%;
    right: 3%;
    position: absolute;
    overflow: hidden;
    width: 140px;
    height: 140px;
    cursor: pointer;
}

#disc {
    position: absolute;
    top: 0px left:0px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid #000000;
    background: url('https://pic.imgdb.cn/item/642d9c53a682492fcccad99f.png') center/cover no-repeat, url('https://img1.kuwo.cn/star/starheads/300/60/25/2616944655.jpg') no-repeat center / 45%;
    animation: spin 10s infinite linear;
}

@keyframes spin {
    100% {
      transform: rotate(360deg);
    }
}

#pickupArm {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 105px;
    background: url('https://pic.imgdb.cn/item/65ffbbe89f345e8d036024a8.png')no-repeat 0px 0px / 100%;
}

.bfpause {
    transform-origin: 100% 0%;
    transform: rotate(-16deg);
}

#indicator {
    position: absolute;
    left: 20%;
    bottom: 10px;
    width: 60%;
    margin: 10px auto;
    appearance: none;
    height: 8px;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
}

#indicator::-webkit-progress-bar {
    background: pink;
}

#indicator::-webkit-progress-value {
    background: hsl(125, 72%, 72%);
}

.lrcShow {
    bottom: 10px;
    left: 30%;
}

.lrcShow::before {
    color: transparent;
    background:url('https://img95.699pic.com/xsj/1r/uu/zw.jpg') center/cover;
    -webkit-background-clip: text;
}

/**--------------------------------------**/
.picBox {
    width: 500px;
    height: 800px;
    display: grid;
    place-items: center;
    padding: 4px;
    float: left;
}

.picBox img {
    width: 500px;
    height: 800px;
}

#picBlk {
    width: 3048px;
    height: 808px;
    position: absolute;
    top: 0px;
    left: 0px;
    aaaanimation: mLeft 30s steps(6);
}

#iBlk {
    width: 508px;
    height: 808px;
    overflow: hidden;
    position: relative;
    margin: auto;
    border-radius: 16px;
}

#vid {
    width: 120%;
    position: absolute;
    left: 0px;
    bottom: 0px;
}
</style>
<div id="oBlk">
<video id="vid" src="https://img3.tukuppt.com/video_show/2421007/00/01/99/5b4ec6e9b2913.mp4" loop autoplay muted></video>
<div id="iBlk">
    <div id="picBlk">
      <div class="picBox">
      <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMyjVdTLA2Hq6zrxOia1caPtfHlwMgsMNPtSrKDhBLicop2mtiaiakC4oETOw/640" />
      </div>
      <div class="picBox">
      <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMyjkK6JI47RWiaQGmE3qdAwuXibMIyribpICAl3WicIfSQf3ZA4Zicn2jIUGA/640" />
      </div>
      <div class="picBox">
      <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMyXqyjKG12ACBFXuY7AAqq9KamVHkM26E0lhRdfjKKp8CzK3TP9uHphw/640" />
      </div>
      <div class="picBox">
      <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMyiaABwYDSLQia8viaP5pFXwSibngicUicxCC8cE4vp7TsgHOEpVzBr0VjzicLw/640" />
      </div>
      <div class="picBox">
      <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMyiczvPeBZXAEtwIHicN5HXbqia5v5Z8Xz8l4icZZHPora3to9FNnGLUt0OQ/640" />
      </div>
      <div class="picBox">
      <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMy7icvqfYficLr6dpu0eKYAtRNu4aAwFspgcsLiaTTGwbWzLZl7nYW0iajOw/640" />
      </div>
    </div>
</div>
<div id="bfctl">
    <div id="disc"></div>
    <div id="pickupArm"></div>
</div>
<div class="lrcShow" data-lrc=""></div>
<progress value='0.0' max='100.0' id='indicator'></progress>
</div>
<script>
var keyFrames = [{
    clipPath: 'ellipse(10% 10% at 50% 50%)',
    opacity: '0.4'
}, {
    clipPath: 'ellipse(30% 30% at 50% 50%)',
    opacity: '0.7',
    offset: 0.3
}, {
    clipPath: 'ellipse(50% 50% at 50% 50%)',
    opacity: '1',
    offset: 0.5
}, {
    clipPath: 'ellipse(75% 75% at 50% 50%)',
    opacity: '0.4',
    offset: 1.0
}, {
    opacity: '0.4'
}];
var EffectTiming = {
    duration: 8000,
    fill: 'forwards'
};
let idx = 0,
    aniObj = null;
let picBoxes = document.querySelectorAll(".picBox");
var sF = document.createElement('script');
sF.src = 'https://file.uhsea.com/2403/7915e4a8279698017eb1625365a4dd6dER.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => {
    let lrctxt = `
作词 : 罗皓予\n 作曲 : 凡间精灵\n 你像三月桃花开-许丽静\n 作词：罗皓予\n 作曲：凡间精灵\n 编曲：牛侠\n 明媚春光去又来\n 桃花年年开\n 满山桃花满山爱\n 三月江南入画来\n 我到山里踏青来\n 桃花朵朵开\n 风唱情歌赛啰赛\n 等待你从风中来\n 你像三月桃花开\n 无意撞上我的爱\n 美丽不负春光来\n 点点滴滴都是爱\n 你像三月桃花开\n 无意撞上我的爱\n 青春微笑荡过来\n 丝丝缕缕醉心怀\n 明媚春光去又来\n 桃花年年开\n 满山桃花满山爱\n 三月江南入画来\n 我到山里踏青来\n 桃花朵朵开\n 风唱情歌赛啰赛\n 等待你从风中来\n 你像三月桃花开\n 无意撞上我的爱\n 美丽不负春光来\n 点点滴滴都是爱\n 你像三月桃花开\n 无意撞上我的爱\n 青春微笑荡过来\n 丝丝缕缕醉心怀\n 你像三月桃花开\n 无意撞上我的爱\n 美丽不负春光来\n 点点滴滴都是爱\n 你像三月桃花开\n 无意撞上我的爱\n 青春微笑荡过来\n 丝丝缕缕醉心怀\n 丝丝缕缕醉心怀\n 丝丝缕缕醉心怀\n
`;
    //       
    let opts = {
      lrcTxt: lrctxt,
      audioURL: "https://music.163.com/song/media/outer/url?id=1434618652.mp3", //
    }
    let playerY = new lrcPlayerY(opts);
    bfctl.onclick = () => {
      playerY.mObj.paused ? (playerY.mObj.play(), pickupArm.classList.remove('bfpause'), disc.style.animationPlayState = 'running', vid.play(), aniObj.play()) : (playerY.mObj.pause(), pickupArm.classList.add('bfpause'), disc.style.animationPlayState = 'paused', vid.pause(), aniObj.pause());
    }
    playerY.mObj.addEventListener('timeupdate', function() {
      if (indicator) {
      indicator.value = this.currentTime / this.duration * 100;
      }
    });

    function move2left() {
      lastIdx = idx - 1;
      if (lastIdx < 0) lastIdx = 5;
      //iBlk.style.background = `url(${picBoxes.querySelector(`img`).src}) no-repeat center /cover`;
      picBlk.style.left = -508 * idx + 'px';
      aniObj = picBoxes.animate(keyFrames, EffectTiming);
      aniObj.onfinish = move2left;
      idx++;
      idx %= 6;
    }
    move2left();
}
</script>

庶民 发表于 2024-4-9 08:27

真美的。

起个网名好难 发表于 2024-4-9 10:09

庶民 发表于 2024-4-9 08:27
真美的。

谢谢支持鼓励！

上午好！

绿叶清舟 发表于 2024-4-10 20:48

画面漂亮，怎么没听到声音了

起个网名好难 发表于 2024-4-10 22:03

绿叶清舟 发表于 2024-4-10 20:48
画面漂亮，怎么没听到声音了

谢谢关注支持！

有两个文件放在一个免费空间里，恰好今天这空间很不稳定时好时坏，所以帖子就表现不正常。

现在打开似乎是好的。

绿叶清舟 发表于 2024-4-14 21:17

起个网名好难 发表于 2024-4-10 22:03
谢谢关注支持！

有两个文件放在一个免费空间里，恰好今天这空间很不稳定时好时坏，所以帖子就表现不正 ...

不客气啊，现在我也能听到了

起个网名好难 发表于 2024-4-15 07:36

绿叶清舟 发表于 2024-4-14 21:17
不客气啊，现在我也能听到了

https://5b0988e595225.cdn.sohucs.com/images/20180205/3579390092fa4f0b8432e582dec8011a.gif

亦是金 发表于 2024-4-15 09:21

美美美！{:4_199:}{:4_208:}{:4_178:}

起个网名好难 发表于 2024-4-15 09:40

亦是金 发表于 2024-4-15 09:21
美美美！

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif


https://p1.itc.cn/q_70/images03/20220509/de075f98fbb146cc84ff06b9dc756058.gif

梦江南 发表于 2024-5-22 15:09

画面很漂亮，怎么没有音乐？

起个网名好难 发表于 2024-5-22 18:39

梦江南 发表于 2024-5-22 15:09
画面很漂亮，怎么没有音乐？

同步歌词和音乐有关的代码存放在另一个免费的空间，很不幸那空间常常出毛病连不上上{:5_102:}

小辣椒 发表于 2024-5-24 16:10

我听到音乐的，也是非常漂亮的效果{:4_199:}

起个网名好难 发表于 2024-5-24 20:17

小辣椒 发表于 2024-5-24 16:10
我听到音乐的，也是非常漂亮的效果

谢谢支持鼓励！晚上好！

梦江南 发表于 2024-5-30 12:01

起个网名好难 发表于 2024-5-22 18:39
同步歌词和音乐有关的代码存放在另一个免费的空间，很不幸那空间常常出毛病连不上上

现在听到了。{:4_199:}

起个网名好难 发表于 2024-5-30 15:34

梦江南 发表于 2024-5-30 12:01
现在听到了。

现在已经没兴趣做帖子了{:5_102:}

梦江南 发表于 2024-5-30 16:31

起个网名好难 发表于 2024-5-30 15:34
现在已经没兴趣做帖子了

不要用这么多图片素材很累的。

起个网名好难 发表于 2024-5-30 16:46

梦江南 发表于 2024-5-30 16:31
不要用这么多图片素材很累的。

费神、费力

梦江南 发表于 2024-5-30 16:52

起个网名好难 发表于 2024-5-30 16:46
费神、费力

就是啊，太多的素材也不好找的。套用也费力。

起个网名好难 发表于 2024-5-30 21:21

梦江南 发表于 2024-5-30 16:52
就是啊，太多的素材也不好找的。套用也费力。

做不出新意的帖子就干脆不做了。

梦江南 发表于 2024-5-31 08:37

起个网名好难 发表于 2024-5-30 21:21
做不出新意的帖子就干脆不做了。

动动脑啊，灵感来了就有新意了。问好！

查看完整版本: 你像三月桃花开