小辣椒 发表于 2024-4-21 17:36

等我不再去打扰 TO：冬天的雨

<style>
#papa { margin: 150px 0 0px calc(50% - 781px);
        width: 1400px;
        height: 768px;
        background:#000000 ;
        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:50px; left:340px;width: 62px; height: 100px;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:88.8%; left:22.5%;
        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: #FFFFFF;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 42px;
        border-width: 6px 6px;
        border-color: transparent transparent transparent #FFFFFF;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 3px;
        height: 10px;
                left: 22px;
        border-width: 0 3px 0 3px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
      font: normal 12px sans-serif;
      color: #ffffff;
         top:87.5%;
      left:8.5%;}

#prog {position: absolute;z-index: 91;
      width: 14.7%;
      height: 0.3%;
      cursor: pointer;
         top:90.6%;
color: #cccccc;
box-shadow: 0px 0px 0.1px 0.1px #000000;
         left:7.2%;
border-radius: 2px;}
#papa:hover #fullscreen { display:block ;opacity: 1;}

#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: #fff; position: absolute; left:17%;top:92.5%;font-size: 14px; z-index: 21; word-break: keep-all; white-space: nowrap; animation: bt 10s 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">等我不再去打扰 (Live合唱版) 歌手：王一佳</div>
<div id="t"><img id="tu" src="https://wj.zp68.com/lxx/yunhua/2024/04/21/59.gif" width="100%" height="100%"></div>
<div id="t1"><img id="tu1" src="https://wj.zp68.com/lxx/yunhua/2024/04/21/78.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://s2.ananas.chaoxing.com/sv-w8/audio/8e/8d/eb/85b016270aa4a6658176936dba70db59/audio.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:71%; left:-27%;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: 34px;
    color: #ff0000;
text-align: center;
}
</style>
<script >
var lrc = `等我不再去打扰 (Live合唱版)
歌手：王一佳
作词：班安华
作曲：灵魂Kk
编曲：滨滨
混音：冯鑫阳
合唱：毅然合唱团
等我不再怕天黑
等我对爱淡如水
等我流干了眼泪
等我忘记你是谁
等我回忆烧成灰
等我把曾经销毁
等我治愈了伤悲
等我潇洒的后退
等我不再去打扰
爱恨都一笔勾销
既然我对你不重要
又何必费力去讨好
等我不再去打扰
收回了心不再闹
往事让它随风飘
从此不为谁煎熬
等我不再去打扰
爱恨都一笔勾销
既然我对你不重要
又何必费力去讨好
等我不再去打扰
收回了心不再闹
往事让它随风飘
从此不为谁煎熬
。。。。。。
等我不再怕天黑
等我对爱淡如水
等我流干了眼泪
等我忘记你是谁
等我回忆烧成灰
等我把曾经销毁
等我治愈了伤悲
等我潇洒的后退
等我不再去打扰
爱恨都一笔勾销
既然我对你不重要
又何必费力去讨好
等我不再去打扰
收回了心不再闹
往事让它随风飘
从此不为谁煎熬
等我不再去打扰
爱恨都一笔勾销
既然我对你不重要
又何必费力去讨好
等我不再去打扰
收回了心不再闹
往事让它随风飘
从此不为谁煎熬
等我不再去打扰
爱恨都一笔勾销
既然我对你不重要
又何必费力去讨好
等我不再去打扰
收回了心不再闹
往事让它随风飘
从此不为谁煎熬

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

小辣椒 发表于 2024-4-21 17:37

@走过岁月

岁月身体原因，今天起来做了一个，感觉还是没有很满意，就这样了

小辣椒 发表于 2024-4-21 17:38

@冬天的雨

冬雨又搞失踪 ，出来现身啊，作业许多没有完成了{:4_172:}

小辣椒 发表于 2024-4-21 17:39

让我吃饭去了，来不及回帖，看见还有许多帖没有回，晚上上来回帖了

愤怒的葡萄 发表于 2024-4-21 18:15

我听不到音乐啊？是我浏览器的问题吗？

起个网名好难 发表于 2024-4-21 18:20

https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif

冬天的雨 发表于 2024-4-21 19:45

小辣椒 发表于 2024-4-21 17:38
@冬天的雨

冬雨又搞失踪 ，出来现身啊，作业许多没有完成了
娃哈哈。。。美女现身，可惜被挡住了一点{:4_170:}

冬天的雨 发表于 2024-4-21 19:46

愤怒的葡萄 发表于 2024-4-21 18:15
我听不到音乐啊？是我浏览器的问题吗？

有音乐的，

冬天的雨 发表于 2024-4-21 19:47

手机欣赏完美，小辣椒辛苦了{:4_197:}{:4_185:}

亦是金 发表于 2024-4-21 19:47

欣赏老师的新帖，我又可以学习套用了！{:4_187:}

冬天的雨 发表于 2024-4-21 19:48

岁月的粒子频谱，肯定的，{:4_178:}@走过岁月

冬天的雨 发表于 2024-4-21 19:50

小辣椒 发表于 2024-4-21 17:38
@冬天的雨

冬雨又搞失踪 ，出来现身啊，作业许多没有完成了

作业小辣椒代完成{:4_170:}

樵歌 发表于 2024-4-21 19:51

就喜欢这种领唱和声的意象，觉得有一种很是温暖和谐的味道。只蹭 音乐哈。{:4_189:}

樵歌 发表于 2024-4-21 19:53

这回冬小雨又跑得跟兔子似的，可惜，你把大长长腿档住了一小段。。。。{:4_170:}

樵歌 发表于 2024-4-21 19:55

冬小雨还留着小胡子，小样纸有点酷，有点呆萌，有点小帅{:4_189:}

樵歌 发表于 2024-4-21 19:57

左上那小美铝跳得真好，是小辣椒自己吧{:4_189:}

冬天的雨 发表于 2024-4-21 19:59

樵歌 发表于 2024-4-21 19:55
冬小雨还留着小胡子，小样纸有点酷，有点呆萌，有点小帅

老首长，冬雨已经提了意见了，帅哥把美女挡住了{:4_170:}

冬天的雨 发表于 2024-4-21 20:54

樵歌 发表于 2024-4-21 19:55
冬小雨还留着小胡子，小样纸有点酷，有点呆萌，有点小帅

这个好像不是冬雨的{:4_170:}

红影 发表于 2024-4-21 21:01

亲爱的真快，岁月那个带灯光效果的大长腿视频，你这么快就用出来呢。
这个制作很漂亮。欣赏亲爱的好帖，冬小雨收礼开心{:4_199:}

樵歌 发表于 2024-4-21 21:26

冬天的雨 发表于 2024-4-21 19:59
老首长，冬雨已经提了意见了，帅哥把美女挡住了

好在没挡完，都能想得到的美{:4_189:}
页: [1] 2 3 4 5
查看完整版本: 等我不再去打扰 TO：冬天的雨