亚伦影音工作室 发表于 2023-11-26 15:15

举杯敬往后-王超然

<style>
#papa {margin: 10px -150px;
        width: 1164px;
        height: 640px;
        background:#000000 url()no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;}
#bt{ color: #000000; position: absolute; left:3%;top:5%;font-size: 30px; font-family:华文隶书;z-index: 11; animation: wz 20s linear infinite ; filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);cursor: pointer;}
.stop #bt{animation-play-state: paused;}
@keyframes wz {
50% {opacity: 1; left: 60%;}
}
#dtp{position: absolute;top:0%; left:0%;width: 100%;height:100%; z-index:3;}

#jzg {position: absolute;
      top:60%; left:10%;z-index: 120;
      width: 220px;filter:hue-rotate(20deg);
      height:210px;
   }
#wudao {position: absolute;
      top:40%; left:20%;z-index: 3;
      width: 230px;
      height:200px;
   }

#jita {position: absolute;
      top:90%; left:0%;z-index: 3;
      width: 100%;
      height:10px;
   }
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:95%; left:calc(95% - 15px);font: normal 1.5em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
</style>
<style>

#klok{
-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-color:#880000;
background-image:linear-gradient(50deg, #ff0000 40%, #00ff80 50%, #fff000 10%, #000078 60%);
   background-repeat:no-repeat;
line-height:35px;
    -webkit-animation:loop 0.56slinearinfinite ;}
@-webkit-keyframes loop{
   50%{background-position: -2200px 0;filter:hue-rotate(360deg)contrast(120%)brightness(350%);}
}
</style>
<div id="papa">
<span id="fullscreen">全屏</span>
<div id="Img"><div id="bt">举杯敬往后-王超然</div></div>
<div id="dtp"><img id="tu" src="https://pic.imgdb.cn/item/6562e440c458853aef0aacce.gif" width="100%" height="100%"></div>
<div id="wudao"><img id="wd" src="https://pic.imgdb.cn/item/652deeb7c458853aef4311e1.gif" width="100%" height="100%">
</div>
<div id="jita"><img id="jt" src="https://pic.imgdb.cn/item/6455fdf60d2dde5777aa7b3c.gif" width="100%" height="100%">
</div>
<divclass="lrc" >
      <div id="klok"><ul id="ullrc">
       </ul> </div>
            </div>
<div id="jzg"><img id="an" src="https://pic.imgdb.cn/item/6562dab1c458853aefe8488e.gif" width="100%" height="100%">
<audio id="aud" src="https://www.qqmc.com/mp3/music287357241.mp3" loop autoplay></audio>
</di>
<script>
(function(){
var image = document.getElementById("Img");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*//*结束*/
/*控制 文字颜色*/
klok.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => klok.style.animationPlayState = 'running');
aud.addEventListener('pause', () => klok.style.animationPlayState = 'paused');
/*结束*/
</script>
<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{cursor: pointer;
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 = `举杯敬往后-王超然
词：苗子
曲：灰色幽默
统筹：千夜
营销推广：千寻文化
OP/SP：千寻文化
举起酒杯敬往后
时光匆匆不停留
不怕起起落落一切再从头
昨夜的伤挥挥手
未来的路还要走
生死以外都是小事别犯愁
举起酒杯敬往后
但愿余生再无忧
至那前尘往事已经难回首
细数一生几个秋
千滋百味品尝够
不枉美好人世这一游
举起酒杯敬往后
时光匆匆不停留
不怕起起落落再从头
昨夜的伤挥挥手
未来的路还要走
生死以外都是小事别犯愁
举起酒杯敬往后
好好活着已足够
命里该有该无不强求
错过的人别念旧
人间不过幅蜃楼
几十年后终究化为乌有
举起酒杯敬往后
但愿余生再无忧
至那前尘往事已经难回首
细数一生几个秋
千滋百味品尝够
不枉美好人世这一游
举起酒杯敬往后
时光匆匆不停留
不怕起起落落再从头
昨夜的伤挥挥手
未来的路还要走
生死以外都是小事别犯愁
举起酒杯敬往后
好好活着已足够
命里该有该无不强求
错过的人别念旧
人间不过幅蜃楼
几十年后终究化为乌有
举起酒杯敬往后
时光匆匆不停留
不怕起起落落再从头
昨夜的伤挥挥手
未来的路还要走
生死以外都是小事别犯愁
`;
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;
jzg.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { vid.paused ? vid.play() : vid.pause()};
/*结束*/

</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;
            // 透明度还原
            image0.style.opacity = '';image1.style.opacity = '';;image2.style.opacity = '';image3.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 image0= document.getElementById("tu");
var image1= document.getElementById("an");
var image2= document.getElementById("wd");
var image3= document.getElementById("jt");
jzg.onclick =function() { aud.paused ? (image0.stop(),image1.stop(),image2.stop(),image3.stop()):(image0.play(),image1.play(),image2.play(),image3.play())};
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
</script>

admin 发表于 2023-11-26 16:22

漂亮，，，赞👍🏻{:5_146:}{:5_146:}

liumang 发表于 2023-11-26 20:24

几个动画用的好{:5_150:}

liumang 发表于 2023-11-26 20:27

播放器上面歌曲走动音乐没有看见了
页: [1]
查看完整版本: 举杯敬往后-王超然