冬天的雨 发表于 2023-10-25 22:42

化风行万里--米灵


<style>
#papa {margin: 120px -300px;
        width: 1164px;
        height: 640px;
        background:#000000 ;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;
}
#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:0%; left:0%;width: 100%;height: 100%;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:93%; left:3%;
        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: #cccccc;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 12px;
        border-width: 10px 12px;
        border-color: transparent transparent transparent #cccccc;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 20px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
      font: normal 15px sans-serif;
      color: #ffffff;
         top:93.5%;
      left:85%;}

#prog {position: absolute;z-index: 91;
      width: 76%;
      height: 0.3%;
      cursor: pointer;
         top:95%;
color: #cccccc;
box-shadow: 0px 0px 0.1px 0.1px #000000;
         left:7%;
border-radius: 2px;}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:94.5%; left:calc(95% - 15px);font: normal 2em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
#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: 65%; width: var(--w); overflow: hidden; color: #fff; position: absolute; left:54%;top:91%;font-size: 16px; z-index: 21; word-break: keep-all; white-space: nowrap; animation: bt 26s 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">化风行万里--米灵</div>
<div id="t"><img id="tu" src="https://www.yiyuen.com/e/file/view/640577" width="100%" height="100%"></div>
<div id="t1"><img id="tu1" src="https://i.mp3.wf/view.php/446dddea9154c9c901ae49a86ed75ca8.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://i.mp3.wf/view.php/ac73f85867d6055205e0ef4d152e3028.mp3" 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:81%; left:0%;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 = `化风行万里--米灵
词/曲：聂小慧
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());
})();
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, snow 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>

冬天的雨 发表于 2023-10-25 22:43

现买现卖@亚伦影音工作室

谢谢~~~~~

冬天的雨 发表于 2023-10-25 22:44

感觉奇怪怎么会有这么多的代码，没有仔细看就直接套用玩一个{:4_170:}

红影 发表于 2023-10-25 22:49

漂亮的制作。冬小雨真快{:4_187:}

醉美水芙蓉 发表于 2023-10-26 07:05

小文 发表于 2023-10-26 07:59

漂亮的制作

冬天的雨 发表于 2023-10-26 13:43

红影 发表于 2023-10-25 22:49
漂亮的制作。冬小雨真快

美女好，套用的就速度快了

冬天的雨 发表于 2023-10-26 13:43

醉美水芙蓉 发表于 2023-10-26 07:05
美女眼睛一眨一眨很漂亮，欣赏冬雨老师佳作！

谢谢美女欣赏{:4_204:}

冬天的雨 发表于 2023-10-26 13:43

小文 发表于 2023-10-26 07:59
漂亮的制作

谢谢小文欣赏{:4_187:}

红影 发表于 2023-10-26 14:07

冬天的雨 发表于 2023-10-26 13:43
美女好，套用的就速度快了

那也需要手上有素材啊，冬小雨的这个美女图很美，歌曲也选得好听{:4_187:}

小辣椒 发表于 2023-10-28 19:49

冬天的雨 发表于 2023-10-25 22:43
现买现卖@亚伦影音工作室

谢谢~~~~~

哇塞~~又一个啊，套用玩玩也是不错的，哈哈你偷懒不做作业了{:4_173:}

小辣椒 发表于 2023-10-28 19:49

歌曲也是好听，掌声送上{:4_199:}{:4_199:}
页: [1]
查看完整版本: 化风行万里--米灵