论坛 › 动画音画 › 《迷茫的爱》龙梅子

焱鑫磊 发表于 2023-10-27 19:05

《迷茫的爱》龙梅子

本帖最后由 焱鑫磊 于 2023-10-27 23:07 编辑 <br /><br /><style>
#papa {margin: 100px -280px;
        width: 1164px;
        height: 728px;
        background:url(https://img.fy6b.com/2023/10/27/8aeea557d2f00.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:84%;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://i.mp3.wf/view.php/45391172be84cd57bad49dfe804c772e.mp3" loop autoplay></audio>
<script >
var songkrc =`《迷茫的爱》龙梅子
词/曲：郭玲
LRC歌词制作：焱鑫磊
你对我的爱 有没有真过
你对我的情 有没有深过
你对我的话 说的哪句是真的
要是爱我你就不要再骗我
你的眼睛里 有没有过我
你的梦境里 有没有过我
你的爱心门 有没有为我开过
我对你的爱真的太累了
不爱我 早点说
别让我的爱迷茫着
分手不说谁对谁错
两个人缘分是天注定的
Hu ya yi hei
Yi ya yi hu
Hei ye
Hu ya yi hei
Yi ya yi hu
Yi ya yi hei
你对我的爱 有没有真过
你对我的情 有没有深过
你对我的话 说的哪句是真的
要是爱我 你就别骗我
你的眼睛里 有没有过我
你的梦境里 有没有过我
你的爱心门 有没有为我开过
我对你的爱真的太累了
不爱我 早点对我说
别让我的爱 迷茫着
分手别说谁对谁错
两个人的缘分是天注定的
你对我的爱 有没有真过
你对我的情 有没有深过
你对我的话 说的哪句是真的
要是爱我你就不要再骗我
你的眼睛里 有没有过我
你的梦境里 有没有过我
你的爱心门 有没有为我开过
我对你的爱真的太累了
不爱我 早点说
别让我的爱迷茫着
分手不说谁对谁错
两个人缘分是天注定的
不爱我 早点说
别让我的爱迷茫着
分手不说谁对谁错
两个人缘分是天注定的
不爱我 早点说
别让我的爱迷茫着
分手不说谁对谁错
两个人缘分是天注定的
Hu ya yi hei
Yi ya yi hu
Hei ye
Hu ya yi hei
Yi ya yi hu
Hu ya yi hei

`;
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 j= 0; j < lyric.length; j++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(j+1==lyric.length){ document.getElementById("musickrc01").innerHTML = lyric; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};};
/*暂停 播放按钮*/
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:0%;
      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://img.fy6b.com/2023/10/26/0b21d8dffac35.jpg')no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 78s;background: url(https://img.fy6b.com/2023/10/26/1bcc79ac931e2.jpg)no-repeat center/cover}
.photo:nth-child(3) {animation-delay: 72s;background: url(https://img.fy6b.com/2023/10/26/70ae8b1482b4c.jpg)no-repeat center/cover}
.photo:nth-child(4) {animation-delay: 66s;background: url(https://img.fy6b.com/2023/10/26/24a74f48317fd.jpg)no-repeat center/cover}
.photo:nth-child(5) {animation-delay: 60s;background: url(https://img.fy6b.com/2023/10/26/81c3a34ea9a5c.jpg)no-repeat center/cover}
.photo:nth-child(6) {animation-delay: 54s;background: url(https://img.fy6b.com/2023/10/26/adab57473117c.jpg)no-repeat center/cover}
.photo:nth-child(7) {animation-delay: 48s;background: url(https://img.fy6b.com/2023/10/26/38d1b9c85718f.jpg)no-repeat center/cover}
.photo:nth-child(8) {animation-delay: 42s;background: url(https://img.fy6b.com/2023/10/26/a0d23c722bf86.jpg)no-repeat center/cover}
.photo:nth-child(9) {animation-delay: 36s;background: url(https://img.fy6b.com/2023/10/26/8534d504f72a5.jpg)no-repeat center/cover}
.photo:nth-child(10){animation-delay: 30s;background: url(https://img.fy6b.com/2023/10/26/c11e66ef9d0d0.jpg)no-repeat center/cover}
.photo:nth-child(11){animation-delay: 24s;background: url(https://img.fy6b.com/2023/10/26/bc8764d607a33.jpg)no-repeat center/cover}
.photo:nth-child(12){animation-delay: 18s;background: url(https://img.fy6b.com/2023/10/26/b850ff9d964f3.jpg)no-repeat center/cover}
.photo:nth-child(13){animation-delay: 12s;background: url(https://img.fy6b.com/2023/10/26/cbf2b04a8a117.jpg)no-repeat center/cover}
.photo:nth-child(14) {animation-delay: 6s;background: url('https://img.fy6b.com/2023/10/26/44462b2cf122a.jpg')no-repeat center/cover}
.photo:nth-child(15) {animation-delay: 0s;background: url('https://img.fy6b.com/2023/10/26/24a74f48317fd.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-10-27 20:26

这个又是上传了的文件呢。制作很漂亮，欣赏焱鑫磊好帖{:4_199:}

焱鑫磊 发表于 2023-10-27 20:28

红影 发表于 2023-10-27 20:26
这个又是上传了的文件呢。制作很漂亮，欣赏焱鑫磊好帖

不打包上传，歌词还是不显示。原因不明。{:4_201:}

亚伦影音工作室 发表于 2023-10-27 20:43

焱鑫磊 发表于 2023-10-27 20:28
不打包上传，歌词还是不显示。原因不明。

我又编辑了代码，你去试试！

焱鑫磊 发表于 2023-10-27 21:20

亚伦影音工作室 发表于 2023-10-27 20:43
我又编辑了代码，你去试试！

谢谢老师！{:4_187:}

焱鑫磊 发表于 2023-10-27 21:47

本帖最后由 焱鑫磊 于 2023-10-27 22:59 编辑

红影 发表于 2023-10-27 20:26
这个又是上传了的文件呢。制作很漂亮，欣赏焱鑫磊好帖
亚伦老师编辑了新的代码。现改发代码帖，效果不错。{:4_181:}

红影 发表于 2023-10-27 23:47

焱鑫磊 发表于 2023-10-27 21:47
亚伦老师编辑了新的代码。现改发代码帖，效果不错。

终于找到解决办法了，真好{:4_187:}

查看完整版本: 《迷茫的爱》龙梅子