亚伦影音工作室 发表于 2023-10-13 09:02

独享夜的孤单-李英

本帖最后由 亚伦影音工作室 于 2023-10-13 10:37 编辑 <br /><br /><style type="text/css">
#papa{ top: 30px;left: -300px; width: 1100px; height: 620px; border-radius: 6px; background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031213462674835656.gif)0 0/40% 100%,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7636499ac714e8e854f9ddf375b50085.jpg)no-repeat center/cover; overflow: hidden; box-shadow: 4px 4px 8px #000; position: relative;}
#papa::before, #papa::after { position: absolute; content: ''; border-radius: inherit; background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/97c6dcbe7cc4409b3e6f9d6943ff5bf3.jpg)0 0 /100% 100%;width: 100%; height: 100%; transition: all 3s linear;z-index: 10;transform: translate(0%,0%) rotateY(0deg);mix-blend-mode: lighten;}
#papa::before {clip-path: polygon(0 100%, 50% 100%, 50% 0, 0 0);}
#papa::after {clip-path: polygon(100% 100%, 50% 100%, 50% 0, 100% 0); }
#papa:hover::before { transform: translate(-100%,0%) rotate(-60deg) scale(1); }
#papa:hover::after { transform: translate(100%,0%) rotate(60deg) scale(1); }
#musickrc{width:80%;line-height:50px;position: absolute;position: absolute;left:10%;top:80%;z-index: 11;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);}
#musickrc span {display:block;text-align:center;}
#anniudw{ width: 400px; height: 400px; position: absolute; left: 72%;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: 99;
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>
<audio id="aud" src="https://www.qqmc.com/mp3/music303114250.mp3" loop="loop" autoplay="autoplay" ></audio>
<divid="musickrc" >
<divid="wzsd1" ><p id="musickrc01"style="color:#ff0000;text-align:left;font-weight: ;font-family:华文隶书;font-size: 40px;" ></P></div>
<P id="musickrc02"style="color:#000078;text-align:right;font-weight: ;font-family:华文隶书;font-size: 40px;"></P>
</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="42" y="-29" width="50" height="50" xlink:href="https://xlaj.cn/assets/file/zp/20231008131301.png"></image>
                <text id="du" x="90" y="0">00:00</text>
      </g>
</svg>
<img id="img_border"src="https://pic.imgdb.cn/item/6430f41f0d2dde577706d0ec.png" >
</div>
</div>
<script type="text/javascript">var songkrc =`独享夜的孤单-李英
词曲：隔壁老陈
编曲：姜凯升（姜山）
混音：Y 爱华
制作人：亚伦
OP：亚伦影音传媒
泪在眼里不停的旋转
却还笑着对你说再见
爱的誓言被风吹散
我们就这样走到了终点
分手原来如此的简单
只有你说的那一句抱歉
爱在此刻慢慢沉陷
甜蜜就这样化作了云烟
从此悲喜再和你无关
你的一切我也不再挂牵
从此再见不到我的笑脸
狠心和昨日一刀两断
从此悲喜再和你无关
你的温柔我也不再眷恋
从此会戒掉想你的习惯
从此独享夜的孤单
分手原来如此的简单
只有你说的那一句抱歉
爱在此刻慢慢沉陷
甜蜜就这样化作了云烟
从此悲喜再和你无关
你的一切我也不再挂牵
从此再见不到我的笑脸
狠心和昨日一刀两断
从此悲喜再和你无关
你的温柔我也不再眷恋
从此会戒掉想你的习惯
从此独享夜的孤单
从此悲喜再和你无关
你的一切我也不再挂牵
从此再见不到我的笑脸
狠心和昨日一刀两断
从此悲喜再和你无关
你的温柔我也不再眷恋
从此会戒掉想你的习惯
从此独享夜的孤单
`;
function parseLyric(text) { var lines = text.split(/\r|\n|\r\n/),pattern = /\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,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://xlaj.cn/assets/file/zp/20231008131321.png',
      pauseImg = 'https://xlaj.cn/assets/file/zp/20231008131301.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');

img_border.onclick =() =>aud.paused ? aud.play() : aud.pause();
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());

</script>

红影 发表于 2023-10-13 10:55

这个是鼠标操控可以打开上层图片呢。漂亮的制作。欣赏亚伦老师好帖{:4_199:}

红影 发表于 2023-10-13 10:56

全屏欣赏后，鼠标操控貌似就没用了呢。不过底图很漂亮{:4_187:}
页: [1]
查看完整版本: 独享夜的孤单-李英