亚伦影音工作室 发表于 2023-10-11 14:03

想到的就一定能做的《惜缘》天籁天最新直击心灵的歌

本帖最后由 亚伦影音工作室 于 2024-10-20 21:47 编辑 <br /><br /><style type="text/css">
#papa{margin: 10px -300px ;width: 1164px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;
height:620px;border: 1px solid;background:#333 url('https://img-qn.51miz.com/preview/element/00/01/32/90/P-1329000-B9E8FD7D.png') no-repeat center/cover; position: relative;z-index: 12345;}
#papa #vid1{ position: absolute; width: 100%; height: 100%; top:0%; object-fit:cover;opacity: 1;z-index: -1; transition: 1s all ease;}

#vid { position: absolute; width: 100%; height: 100%; top:0%; object-fit:cover;opacity: 0;z-index: -1; transition: 1s all ease;}
#vid:hover{ opacity: 1; position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; z-index: -1;}
#musickrc{width:80%;line-height:30px;position: absolute;left:10%;top:80%;font: normal3em 隶书; }
#musickrc span {display:block;text-align:center;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);}
#anniudw{ width: 400px; height: 400px; position: absolute; left: 2%;top: 42%;overflow: hidden;}
#mplayer { width: 350px; height: 350px; position: absolute; left: 0px;top: 0px;z-index: 100}
#mplayer text { user-select: none; }
#sPath { cursor: pointer;position:}
#progress { pointer-events: none; }
#btnPlay{ cursor: pointer;position: absolute; filter: brightness(1.2);transform: rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}
#btnPlay:hover { cursor: pointer; position: absolute;filter: brightness(1.2);transform: rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}
#img_border{display:inline-block;width:160px;height:160px;position: absolute;left: 5px;top: 56px;z-index: 1;
border:6px solid #cccccc;border-radius:50%;animation:rotating 10s linear infinite; }
@keyframes rotating{0% {transform: rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}
100% {transform: rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}
}
#wzsd1 { animation: wzsd 0.6s linear infinite ; }
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(100%)brightness(120%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(120%)brightness(100%);}}
#fullscreen { position: absolute; top:10%; left:85%;font: normal 2em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 191;}
</style>

<div id="papa">

<span id="fullscreen">全屏欣赏</span>
<video id="vid1" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/64c9ac41a1274a451f8c79624f78374b_preview.mp4" muted autoplayloop></video>
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/e5a04b70f9351f400da2604ab85cd3ac_preview.mp4" muted autoplayloop></video>

<audio id="aud" src="https://songs.boonkiong.com/45275029.mp3" loop="loop" autoplay="autoplay" ></audio>

<divid="musickrc" >
<div id="wzsd1"><span id="musickrc01" style="color:#ff0000;text-align:left;"></span></div>
<span id="musickrc02"style="text-align:right;"></span>
</div>
<div id="anniudw">
<svg id="mplayer">
      <path id="sPath" d="M100 5 Q-50 160 190 5" fill="none" stroke="#ffffff"stroke-width="4"></path>
<circle id="progress" cx="10" cy="10" r="5" fill="#1E90FF" stroke="#0000" />
      <g transform="translate(30,160)" fill="#ffffff">
                <text id="cu" x="0" y="0">00:00</text>
                <image id="btnPlay" x="45" y="-22" width="40" height="40" xlink:href="https://www.kumeiwp.com/sub/filestores/2022/12/05/79de7156c08a00eb480d7f1a00b5ba74.png"></image>
                <text id="du" x="90" y="0">00:00</text>
      </g>
</svg>
<img id="img_border"src="http://image.hnol.net/c/2022-01/08/11/20220108115931931-5769293.jpg" >
</div>
</div>
<script type="text/javascript">var songkrc =`惜缘 - 天籁天 (Isabella)
词：郭松宇
曲：郭松宇
茫茫人海中遇见
眨眼几十年
好像白驹飞云端
弹指一挥间
一段缘分来相聚
一份情却散
众生分分又合合
转眼是云烟
情怨总难了
爱恨相纠缠
且行性情事
放下心中怨
爱无前世爱
缘无来生缘
珍惜眼前人
携手永相牵
曾经多少次回眸
多少次擦肩
千年修得同船度
共撑一把伞
人生路上有风雨
也有艳阳天
笑看沧海和桑田
旅途中相伴
情怨总难了
爱恨相纠缠
且行性情事
放下心中怨
爱无前世爱
缘无来生缘
珍惜眼前人
携手永相牵
情怨总难了
爱恨相纠缠
且行性情事
放下心中怨
爱无前世爱
缘无来生缘
珍惜眼前人
携手永相牵
珍惜眼前人
携手永相牵`;
function parseLyric(text) { var lines = text.split(/\r|\n|\r\n/),pattern = /\[\d{2}:\d{2}.\d{2}\]/g,result = []; while (!pattern.test(lines)) {lines = lines.slice(1); }; lines.length === 0 && lines.pop(); lines.forEach(function(v,i,a) { var time = v.match(pattern), value = v.replace(pattern,''); time.forEach(function(v1,i1,a1){ var t = v1.slice(1, -1).split(':'); result.push(,10) * 60 + parseFloat(t), value]); }); }); result.sort(function(a, b){ return a - b;}); return result;}
var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("musickrc01").innerHTML = ""; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; my_audio.play();

let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };
</script>
<script language="javascript">
let posAr = [];
let len = sPath.getTotalLength();
let playImg = 'https://www.kumeiwp.com/sub/filestores/2022/12/05/2df9122733b83c702ccd579c693a2271.png',
      pauseImg = 'https://www.kumeiwp.com/sub/filestores/2022/12/05/79de7156c08a00eb480d7f1a00b5ba74.png';

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; };

let mState = () => aud.paused ? btnPlay.setAttribute('xlink:href',playImg) : btnPlay.setAttribute('xlink:href',pauseImg);

let getMinItem = (ar) => {
      ar.sort((a,b) => a - b);
      return ar;
};

for(i = 0; i < len; i ++) {
      posAr.push(sPath.getPointAtLength(i));
}

sPath.onclick = (e) => {
      let ex = Math.round(e.offsetX), ey = Math.round(e.offsetY), yAr = [];
      for(i = 0; i < len; i ++) {
                let px = Math.round(posAr.x), py = Math.round(posAr.y);
                if(Math.abs(ex-px) <= 4) {
                        yAr.push();
                }
      }
      aud.currentTime = getMinItem(yAr) * aud.duration / len;
};

aud.addEventListener('timeupdate', () => {
      let idx = Math.round(aud.currentTime * len / aud.duration);
      progress.setAttribute('cx',posAr.x);
      progress.setAttribute('cy',posAr.y);
      cu.textContent = toMin(aud.currentTime);
      du.textContent = toMin(aud.duration);
});
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
btnPlay.onclick = () => aud.paused ? aud.play() : aud.pause();

img_border.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>img_border.style.animationPlayState = 'paused');

wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');

(function() {
let vid = document.querySelector('vid1');
let mState = () => aud.paused ?vid1.pause() :vid1.play();
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);});
setInterval( () => { aud.paused ? vid1.pause() : vid1.play(); },100);
</script>

红影 发表于 2023-10-11 15:30

这个可以鼠标切换图片，而且好像用图片变形带来了动态的感觉。真漂亮的制作{:4_199:}

红影 发表于 2023-10-11 15:31

曲线路径，按钮换成了漂亮的图图，而且可以一键全控。欣赏亚伦老师好帖{:4_187:}

醉美水芙蓉 发表于 2023-10-11 17:15

亦是金 发表于 2023-10-11 18:39

欣赏亚伦的美帖！漂亮好听！学习了！{:4_176:}

焱鑫磊 发表于 2023-10-11 22:04

欣赏！{:4_176:}

世外桃源 发表于 2023-10-12 12:32

欣赏欣赏

世外桃源 发表于 2023-10-12 12:32

漂亮漂亮{:4_187:}
页: [1]
查看完整版本: 想到的就一定能做的《惜缘》天籁天最新直击心灵的歌