宁静 发表于 2024-5-20 20:47

爱情里没有谁对谁错--祝福朋友们520 快乐！


<style>
#papa { margin: 150px 0 0px calc(50% - 689px);
        width: 1208px;
        height: 689px;
        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: 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:92.6%; left:52%;
        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: 47px;
        border-width: 4px 4px;
        border-color: transparent transparent transparent #CCCCCC;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 8px;
                left: 32px;
        border-width: 0 3px 0 3px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
      font: normal 10px sans-serif;
      color: #cccccc;
         top:91.5%;
      left:35%;}

#prog {position: absolute;z-index: 91;
      width: 18.3%;
      height: 0.2%;
      cursor: pointer;
      top:94.8%;
color:#FFFFFF
box-shadow: 0px 0px 0.1px 0.1px #000000;
          left:34.3%;
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: 25%; width: var(--w); overflow: hidden; color: #cccccc; position: absolute; left:41%;top:87%;font-size: 14px; 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">爱情里没有谁对谁错：郑源 </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://xlaj.cn/assets/file/zp/20240514134347.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://wj1.zp68.com:812/lxx/yunhua/20200512/yy/11.mp3" loop autoplay></audio>

<style type="text/css">
.lrc{z-index: 20;
    width: 100%;
    height: 120px;
    overflow: hidden;filter:drop-shadow(#cccccc 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#cccccc -1px 0 0) drop-shadow(#ffffff 0 -1px0);
    display: block;position: absolute;top:12%; left:-17.5%;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 = `爱情里没有谁对谁错
歌手：郑源 (Jacky)/T.R.Y
祝福朋友们520快乐！
我还来不及做好准备
约定就已经开始作废
都说爱情是弥足珍贵
现在感觉里只有苦味
可是我不会夜夜流泪
虽然偶尔也痛彻心扉
缘尽了 你走了 无法回头
我要努力学会 无所谓
就这样 就这样 忍住伤悲
也许会 也许会 感到疲惫
再给我花开花落一个轮回
你就会在记忆中慢慢消褪
不再想 不再想 谁是谁非
爱情里并没有 谁错谁对
再给我春去秋来一个轮回
我就会化茧成蝶飞得更美
不再想 不再想 谁是谁非
爱情里并没有 谁错谁对
再给我春去秋来一个轮回
我就会化茧成蝶飞得更美
可是我不会夜夜流泪
虽然偶尔也痛彻心扉
缘尽了 你走了 无法回头
我要努力学会 无所谓
就这样 就这样 忍住伤悲
也许会 也许会 感到疲惫
再给我花开花落一个轮回
你就会在记忆中慢慢消褪
不再想 不再想 谁是谁非
爱情里并没有 谁错谁对
再给我春去秋来一个轮回
我就会化茧成蝶飞得更美
就这样 就这样 忍住伤悲
也许会 也许会 感到疲惫
再给我花开花落一个轮回
你就会在记忆中慢慢消褪
不再想 不再想 谁是谁非
爱情里并没有 谁错谁对
再给我春去秋来一个轮回
我就会化茧成蝶飞得更美
再给我春去秋来一个轮回
我就会化茧成蝶飞得更美
朋友们520快乐！永远爱你们！


`;
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,#fe0303,#fe0303, #fe0303 ' + aud.currentTime / aud.duration * 100 + '%, #cccccc 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-5-20 20:48

祝朋友们520 快乐！{:10_402:}

宁静 发表于 2024-5-20 20:48

不是520也是要快乐{:9007:}

沉默 发表于 2024-5-20 20:58

沙发我的{:9007:}

沉默 发表于 2024-5-20 20:59

520的沙发特别的舒服{:9001:}

宁静 发表于 2024-5-20 21:02

沉默 发表于 2024-5-20 20:59
520的沙发特别的舒服

今天速度的{:9022:}


今天有球赛你不看？

蜻蜓 发表于 2024-5-20 21:10

宁静 发表于 2024-5-20 20:48
不是520也是要快乐

这话我爱听{:9005:}

蜻蜓 发表于 2024-5-20 21:11

这首歌我一直都喜欢，宁静选的这效果很好{:10_402:}

宁静 发表于 2024-5-20 21:24

蜻蜓 发表于 2024-5-20 21:11
这首歌我一直都喜欢，宁静选的这效果很好

郑源的声音带沧桑感的，特别的有感染力

宁静 发表于 2024-5-20 21:24

蜻蜓 发表于 2024-5-20 21:10
这话我爱听

蜻蜓，520快乐！{:10_401:}
页: [1] 2 3 4
查看完整版本: 爱情里没有谁对谁错--祝福朋友们520 快乐！