小辣椒 发表于 2024-6-23 21:09

你爱我坏 (DJ沈念版) 歌手：小鬼阿秋

<meta charset="UTF-8">
<style>
#papa{ margin: 150px 0 20px calc(50% - 698px);
        width: 1235px;
        height: 717px;
        background:#000 url(https://wj.zp68.com/lxx/yunhua/2024/06/22/66.jpg)no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; user-select: none; z-index: 1; --opt: .25;}
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%;   opacity: 1;z-index: 2; background:linear-gradient(0deg, #000000 10%,#Ffffff 11%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 1%);}
#t{position: absolute;top:580px; left:150px;width: 32px; height: 32px;z-index:4;mix-blend-mode:lighten;}
#t1{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:3;}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
        position: absolute;
        top:85.6%; left:80.2%;
        bottom: 5px;
        width: 30px;
        height: 30px;
        border: 0px solid #cccccc;
        border-radius: 0%;
        opacity: 1;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #ccc;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 48px;
        border-width: 3.5px 3.5px;
        border-color: transparent transparent transparent #ccc;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 1px;
        height: 5px;
                left: 22.5px;
        border-width: 0 2px 0 2px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
      font: bold 12px/16px '微软雅黑',serif;
      color: #ccc;
         top:82%;
      left:79.4%;}

#prog {position: absolute;z-index: 91;
      width: 11.0%;
      height: 0.5%;
      cursor: pointer;
         top:85.1%;
color: #cccccc;
box-shadow: 0px 0px 0.1px 0.1px #000000;
         left:79.2%;
border-radius: 2px;}


#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
#bt{ --w: 28%; width: var(--w); overflow: hidden; color: #84c387; position: absolute; left:42%;top:90%;font-size: 20px; z-index: 21; word-break: keep-all; white-space: nowrap; animation: bt 14s linear infinite;}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>

<div id="papa">

<span id="fullscreen"> </span>
<div id="mb"></div>
<div id="bt"> 你爱我坏 (DJ沈念版)歌手：小鬼阿秋</div>
<div id="t"><img id="tu" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" width="100%" height="100%"></div>
<div id="t1"><img id="tu1" src="https://wj.zp68.com/lxx/yunhua/2024/06/22/66.gif" width="100%" height="100%"></div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<divclass="lrc" >
      <div   id="wzsd1"><ul id="ullrc">
       </ul>
      </div>      
</div>
</div>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/fb68-audiofreehighqps/43/52/GMCoOSUJK8gPACAAAAJ-N9gb.m4a" loop autoplay></audio>

<style type="text/css">
.lrc{z-index: 20;
    width: 100%;
    height: 120px;
    overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
    display: block;position: absolute;top:8%; left:15%;z-index: 5;
    margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 40px;
    color: #ff0000;
text-align: center;
}
</style>
<script >
var lrc =`如果当时我们没有被分开
现在会不会有小孩
是女儿像你那么可爱
还是儿子像我这个无赖
词：何深彰
曲：何深彰
编曲：众造文化
混音：李琰祥
监制：众造文化
制作人：高天
发行：漫吞吞文化
那年我什么都没有
不能留住你牵我的手
时间过去多年后 你在谁左右
总是想起你的眼眸
对你的爱说不出口
岁月带不走我的愁
也带不来你温柔
如果不分开的话
我们就可以一起跨年了
如果当时我们没有被分开
现在会不会有小孩
是女儿像你那么可爱
还是儿子像我这个无赖
我好想看看现在你被谁疼爱
这份遗憾一生的爱
抬头看天空不让泪流下来
好好过好我的现在
我的现在
。。。。。。
总是想起你的眼眸
对你的爱说不出口
岁月带不走我的愁
也带不来你温柔
如果当时我们没有被分开
现在会不会有小孩
是女儿像你那么可爱
还是儿子像我这个无赖
我好想看看现在你被谁疼爱
这份遗憾一生的爱
抬头看天空不让泪流下来
好好过好我的现在
如果当时我们没有被分开
现在会不会有小孩
是女儿像你那么可爱
还是儿子像我这个无赖
我好想看看现在你被谁疼爱
这份遗憾一生的爱
抬头看天空不让泪流下来
好好过好我的现在
抬头看天空不让泪流下来
好好过好我的现在
谢谢欣赏


`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}
var lrcArray = getLrcArray();
function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
    var lrc_li_height = 70, lrc_ul_height = 60;
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("aud").ontimeupdate = setPosition;
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();

prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
            aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #ccc, #ccc, #ccc ' + aud.currentTime / aud.duration * 100 + '%, #444444 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

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

/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { vid.paused ? vid.play() : vid.pause()};
/*结束*/
/*控制歌词*/
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');
/*结束*/
</script>

<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';image1.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}
var image= document.getElementById("tu");
var image1= document.getElementById("tu1");
mplayer.onclick =function() { aud.paused ? (image.stop(),image1.stop()):(image.play(),image1.play())};
</script>

小辣椒 发表于 2024-6-23 21:11

岁月的粒子效果捣鼓玩一个

liumang 发表于 2024-6-23 22:26

画面炫酷，播放器漂亮，掌声响起来{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2024-6-23 22:27

和小子同一首了，不错，画面浪漫的{:6_181:}

liumang 发表于 2024-6-23 22:28

可惜我不坏{:6_181:}

liumang 发表于 2024-6-23 22:29

@bgmnet 进来看看

{:5_152:}{:5_152:}{:5_152:}

bgmnet 发表于 2024-6-24 21:58

liumang 发表于 2024-6-23 22:29
@bgmnet 进来看看

我来了{:5_129:}{:5_129:}

小辣椒 发表于 2024-6-25 19:34

liumang 发表于 2024-6-23 22:26
画面炫酷，播放器漂亮，掌声响起来

谢谢欣赏{:5_146:}

小辣椒 发表于 2024-6-25 19:34

bgmnet 发表于 2024-6-24 21:58
我来了

同一首了

liumang 发表于 2024-6-25 21:40

小辣椒 发表于 2024-6-25 19:34
同一首了

谢谢小辣椒{:5_140:}
页: [1] 2
查看完整版本: 你爱我坏 (DJ沈念版) 歌手：小鬼阿秋