青春如梦-魏佳艺

亚伦影音工作室 发表于 2023-10-19 11:22

本帖最后由亚伦影音工作室于 2025-3-3 20:10 编辑 <br /><br /><style>
#papa {margin: 10px -300px;
width: 1164px;
height: 640px;
background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7636499ac714e8e854f9ddf375b50085.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://pic.imgdb.cn/item/642e1dcea682492fcc4d5bb1.png')no-repeat center/cover;transform:rotate(-2deg);transform-origin: 100% 0%;}
.purple { background: url('https://pic.imgdb.cn/item/642e1dcea682492fcc4d5bb1.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:80%;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://music.163.com/song/media/outer/url?id=1864887870.mp3" loop autoplay></audio>
<script >
var songkrc =`青春如梦-魏佳艺
作词：苗子
作曲：灰色幽默
编曲：田瑞东
和声：雪无影
混音：韩永康
制作人：亚伦
监制：飞飞
OP/SP：亚伦影音
......
借一缕月光
铺满未来的方向
穿上青春的衣裳
梦在自由的生长
借一寸暖阳
抵御寒夜的冰凉
破茧而出的欲望
越过现实的网
我们风为马梦为甲
不负时光热烈年华
我们过千山越风沙
终会绽放绚丽盛夏
我们风为马梦为甲
青春无价造啊浪啊
我们迎朝阳枕晚霞
一路生花在我们脚下
借一缕月光
铺满未来的方向
穿上青春的衣裳
梦在自由的生长
借一寸暖阳
抵御寒夜的冰凉
破茧而出的欲望
越过现实的网
我们风为马梦为甲
不负时光热烈年华
我们过千山越风沙
终会绽放绚丽盛夏
我们风为马梦为甲
青春无价造啊浪啊
我们迎朝阳枕晚霞
一路生花在我们脚下
我们风为马梦为甲
不负时光热烈年华
我们过千山越风沙
终会绽放绚丽盛夏
我们风为马梦为甲
青春无价造啊浪啊
我们迎朝阳枕晚霞
一路生花在我们脚下
我们风为马梦为甲
不负时光热烈年华
我们过千山越风沙
终会绽放绚丽盛夏
我们风为马梦为甲
青春无价造啊浪啊
我们迎朝阳枕晚霞
一路生花在我们脚下
`;

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: 100%;
position: absolute;
z-index: 1;
top:0px; left:0px;filter:contrast(120%)brightness(80%);
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://img-qn.51miz.com/preview/element/00/01/33/20/P-1332073-5C9607BD.png')no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 78s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312352-E506D784.png)no-repeat center/cover}
.photo:nth-child(3) {animation-delay: 72s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/17/P-1311727-040363C5.png)no-repeat center/cover}
.photo:nth-child(4) {animation-delay: 66s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/17/P-1311728-7F39962B.png)no-repeat center/cover}
.photo:nth-child(5) {animation-delay: 60s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312352-E506D784.png)no-repeat center/cover}
.photo:nth-child(6) {animation-delay: 54s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312353-7B4AD9E1.png)no-repeat center/cover}
.photo:nth-child(7) {animation-delay: 48s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312355-659BD8DC.png)no-repeat center/cover}
.photo:nth-child(8) {animation-delay: 42s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313154-3807C065.png)no-repeat center/cover}
.photo:nth-child(9) {animation-delay: 36s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/14/P-1311459-35C9504D.png)no-repeat center/cover}
.photo:nth-child(10){animation-delay: 30s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313163-D3AC7269.png)no-repeat center/cover}
.photo:nth-child(11){animation-delay: 24s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313165-A3FD1305.png)no-repeat center/cover}
.photo:nth-child(12){animation-delay: 18s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312358-897681D1.png)no-repeat center/cover}
.photo:nth-child(13){animation-delay: 12s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313157-AA2D045C.png)no-repeat center/cover}
.photo:nth-child(14) {animation-delay: 6s;background: url('https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313158-3C9ABEF0.png')no-repeat center/cover}
.photo:nth-child(15) {animation-delay: 0s;background: url('https://img-qn.51miz.com/preview/element/00/01/31/26/P-1312615-B88B9882.png')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-10-19 11:52

播放器按钮好漂亮，歌曲也好听。欣赏亚伦老师好帖{:4_199:}

红影发表于 2023-10-19 11:53

轮播图图很漂亮，轮播方式有点怪，还是头一次看到呢{:4_204:}

醉美水芙蓉 发表于 2023-10-19 11:55

老谟深虑 发表于 2023-10-19 14:56

制作的真好，欣赏点赞！

焱鑫磊 发表于 2023-10-20 23:24

欣赏老师佳作！{:4_187:}

页: [1]

花潮论坛's Archiver

青春如梦-魏佳艺