醉美水芙蓉 发表于 2023-10-19 21:49:38

西楼儿女-海来阿木

<style>
#papa {margin: 10px -300px;
        width: 1454px;
        height: 909px;
        background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/de2574ec1fce0400d37d26b352fcff80_preview.jpg)no-repeat center/cover;
        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) 100%,#000000 100%,black 100%);}
#vid { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1;z-index: -1; transition: 0.1s all ease;}

#gj {top:40%; left:-34%;z-index: 20;
position: absolute;overflow: hidden;transform:scale(0.3);
width: 100%;
height: 100%;}
#xzcp {top:25%; left:4%;z-index: 20;
position: absolute;
width: 350px;
height: 350px;
border-radius: 50%;
background:url('https://pic.imgdb.cn/item/642d9c53a682492fcccad99f.png') center/cover no-repeat,url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b0bea37f1dff1ba2977e3d3cdf8cf8ea.jpg')30px 50px/100% 60%;
animation: spin 10s infinite linear ;}
@keyframes spin {100% { transform: rotate(360deg);opacity: 1; }
}

#mplayer {position: absolute;
      top:2%; left:0%;z-index: 20;
      width: 500px;
      height: 500px;
      cursor: pointer;
}
.pink { background: url('https://s1.ax1x.com/2022/07/18/jo4wIH.png')no-repeat center/cover;transform:rotate(-2deg);transform-origin: 100% 0%;}
.purple { background: url('https://s1.ax1x.com/2022/07/18/jo4wIH.png')no-repeat center/cover; transform-origin: 75% 0%;margin: 25px -32px;transform:rotate(-20deg);}
#tmsg {position: absolute;z-index: 91;
      font: normal 15px sans-serif;
      color: #ffffff;
         top:93.5%;
      left:82%;}

#prog {position: absolute;z-index: 91;
      width: 67%;
      height: 2px;
      cursor: pointer;
         top:95%;
color: #cccccc;
box-shadow: 0px 0px 0.1px 0.1px #000000;
         left:14%;
border-radius: 2px;}
#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}
#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: 70%; width: var(--w); overflow: hidden; color: #fff; position: absolute; left:70%;top:90%;font-size: 16px; z-index: 91;}
#bt { word-break: keep-all; white-space: nowrap; animation: bt 26s linear infinite; background:#0000}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
.stop #bt{animation-play-state: paused;}
#musickrc{width:80%;line-height:35px;position: absolute;position: absolute;color:#000080;left:10%;top:76%;z-index: 11;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);}
#musickrc span {display:block;text-align:center; }
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:3;mix-blend-mode:lighten;}
</style>

<div id="papa">
<span id="fullscreen">全屏</span>
<div id="Img0" ><span id="bt">西楼儿女-海来阿木</span></div>
<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/64a52c121ddac507cc5fd3ac.gif" width="100%" height="100%"></div>
<div id="testImg" >
<pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p>
</div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="gj" >
<div id="xzcp" ></div>
<div id="mplayer" class="pink"></div>
</div>
<divid="musickrc" >
<divid="klok" ><p id="musickrc01"style="color:#000080; text-align:center;font-family:华文隶书;font-size: 40px;" ></P></div>
<P id="musickrc02"style="color:#000080;text-align:right;font-weight: ;font-family:华文隶书;font-size: 0px;"></P>
</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music288724644.mp3" loop autoplay></audio>
<script >
var songkrc =`西楼儿女-海来阿木
作词：海来阿木
作曲：海来阿木
演唱：海来阿木
编曲：王白/海来阿木
混音：王白
录音：历城
OP：坚诚文化
LRC编辑：醉美水芙蓉
你看天色又在远处落下
寂寞的城道别天边晚霞
迷茫的人走在路上想家
生活的碎让泪横过脸颊
谁在西楼唱着儿女情长
昏暗的灯临幸我的惆怅
热烈的酒凌迟我的悲伤
难过的人扶着杯子笑场
陌生的朋友你请听我讲
许多年前我也曾有梦想
想过满载荣誉回到家乡
这肆意的风压弯了海棠
提起故人故事泪湿眼眶
谈及旧爱旧恨寸断肝肠
偶尔想你为我披件衣裳
别留我一人在风里摇晃
别留我一人在风里摇晃
偶尔想你为我披件衣裳
谈及旧爱旧恨寸断肝肠
提起故人故事泪湿眼眶
这肆意的风压弯了海棠
想过满载荣誉回到家乡
许多年前我也曾有梦想
陌生的朋友你请听我讲
难过的人扶着杯子笑场
热烈的酒凌迟我的悲伤
昏暗的灯临幸我的惆怅
谁在西楼唱着儿女情长
生活的碎让泪横过脸颊
迷茫的人走在路上想家
寂寞的城道别天边晚霞
你看天色又在远处落下
陌生的朋友你请听我讲
许多年前我也曾有梦想
想过满载荣誉回到家乡
这肆意的风压弯了海棠
提起故人故事泪湿眼眶
谈及旧爱旧恨寸断肝肠
偶尔想你为我披件衣裳
别留我一人在风里摇晃
别留我一人在风里摇晃
谢谢欣赏！
`;

function parseLyric(text) { var lines = text.split(/\r|\n|\r\n/),pattern = /\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g,result = []; while (!pattern.test(lines)) {lines = lines.slice(1); }; lines.length === 0 && lines.pop(); lines.forEach(function(v,i,a) { var time = v.match(pattern), value = v.replace(pattern,''); time.forEach(function(v1,i1,a1){ var t = v1.slice(1, -1).split(/:/); result.push(,10) * 60 + parseFloat(t), value]); }); }); result.sort(function(a, b){ return a - b;}); return result;}
var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("musickrc01").innerHTML = ""; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; my_audio.play();

/*暂停 播放按钮*/
mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple')) : (aud.pause(),mplayer.classList.add('purple')));
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,#00ff00,#00ff80,#ff0000 ' + 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() { aud.paused ? vid.pause(): vid.play() };
/*结束*/
/*控制歌词颜色*/
klok.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => klok.style.animationPlayState = 'running');
aud.addEventListener('pause', () => klok.style.animationPlayState = 'paused');
/*结束*/

/*控制文字颜色*/
dt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => dt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dt.style.animationPlayState = 'paused');
/*结束*/
xzcp.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>xzcp.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>xzcp.style.animationPlayState = 'paused');
</script>
<style>
#klok{
-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
background-color:#000000;
   background-image:linear-gradient(90deg, #ff0000 60%, #000080 40%, #8B4513 80%);
   background-repeat:no-repeat;
-webkit-animation:loop 4slinearinfinite ;}
@-webkit-keyframes loop{
   50%{background-position: -800px 0;filter:hue-rotate(0deg)contrast(120%)brightness(350%);}
}
</style>
<style>
.photo {width: 100%;
height: 102%;
position: absolute;
z-index: 1;
   top:-4%;
      left:0%;
opacity: 0;
animation: round 90s linear infinite;}
@keyframes round{0% {opacity: 1;-webkit-transform:translate(0%,0%)scale(1)perspective(20px) rotateY(-45deg);;}
4% {opacity: 1;-webkit-transform:translate(0%,0%)scale(1);}
8% {opacity: 1;-webkit-transform:translate(0%,0%)scale(1);}
12% {opacity: 1;-webkit-transform:translate(-150%,0%)scale(1)perspective(10px) rotateY(10deg);}
14% {opacity: 0;-webkit-transform:translate(-150%,0%)scale(1)perspective(10px) rotateY(10deg);}
}
.photo:nth-child(1) {animation-delay: 84s;background: url('https://files.superbed.cn/store/superbed/d5/17/650fd64fc458853aef59d517.jpg')no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 78s;background: url(https://files.superbed.cn/store/superbed/43/db/64ed6a7b661c6c8e540843db.jpg)no-repeat center/cover}
.photo:nth-child(3) {animation-delay: 72s;background: url(https://files.superbed.cn/store/superbed/b5/e6/64d352b41ddac507cccdb5e6.jpg)no-repeat center/cover}
.photo:nth-child(4) {animation-delay: 66s;background: url(https://files.superbed.cn/store/superbed/ff/ad/64ca58f71ddac507ccb4ffad.jpg)no-repeat center/cover}
.photo:nth-child(5) {animation-delay: 60s;background: url(https://pic.imgdb.cn/item/64c4d9f01ddac507cc6eba14.jpg)no-repeat center/cover}
.photo:nth-child(6) {animation-delay: 54s;background: url(https://files.superbed.cn/store/superbed/16/3d/64ba77341ddac507cc3b163d.jpg)no-repeat center/cover}
.photo:nth-child(7) {animation-delay: 48s;background: url(https://pic.imgdb.cn/item/64969e4b1ddac507cc64d616.jpg)no-repeat center/cover}
.photo:nth-child(8) {animation-delay: 42s;background: url(https://pic.imgdb.cn/item/648ad3141ddac507cc8ea72c.jpg)no-repeat center/cover}
.photo:nth-child(9) {animation-delay: 36s;background: url(https://pic.imgdb.cn/item/647ca0751ddac507cc55f02c.jpg)no-repeat center/cover}
.photo:nth-child(10){animation-delay: 30s;background: url(https://pic1.imgdb.cn/item/646dfbf50d2dde5777332400.jpg)no-repeat center/cover}
.photo:nth-child(11){animation-delay: 24s;background: url(https://pic2.imgdb.cn/item/6454e37c0d2dde57775afb61.jpg)no-repeat center/cover}
.photo:nth-child(12){animation-delay: 18s;background: url(https://pic.imgdb.cn/item/643d1ed80d2dde577735d266.jpg)no-repeat center/cover}
.photo:nth-child(13){animation-delay: 12s;background: url(https://pic.imgdb.cn/item/642ac9eca682492fccfdaa49.jpg)no-repeat center/cover}
.photo:nth-child(14) {animation-delay: 6s;background: url('https://pic.imgdb.cn/item/641d9180a682492fccef0b2b.jpg')no-repeat center/cover}
.photo:nth-child(15) {animation-delay: 0s;background: url('https://pic.imgdb.cn/item/640d3389f144a010078923a9.jpg')no-repeat center/cover}
.stop .photo:nth-child(1),
.stop .photo:nth-child(2),
.stop .photo:nth-child(3),
.stop .photo:nth-child(4),
.stop .photo:nth-child(5),
.stop .photo:nth-child(6),
.stop .photo:nth-child(7),
.stop .photo:nth-child(8),
.stop .photo:nth-child(9),
.stop .photo:nth-child(10),
.stop .photo:nth-child(11),
.stop .photo:nth-child(12),
.stop .photo:nth-child(13),
.stop .photo:nth-child(14),
.stop .photo:nth-child(15){animation-play-state: paused;}
</style>
<script>
/*控制动画*//*控制动字*/
(function(){
var image = document.getElementById("testImg");
var image0 = document.getElementById("Img0");
let mState = () => aud.paused ? (image.classList.add('stop'),image0.classList.add('stop')):(image.classList.remove('stop'),image0.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*//*结束*/
</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 = '';
      }
      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("Img");
mplayer.onclick =function() { aud.paused ? (image.stop()):(image.play())};
/*结束*/
</script>

红尘过客 发表于 2023-12-30 07:29:16

这个作品漂亮！！！！

快播 发表于 2024-1-24 02:12:42

这个作品漂亮！！！！
页: [1]
查看完整版本: 西楼儿女-海来阿木