亚伦影音工作室 发表于 2023-9-10 12:23

狐狸控制住了

<style>
#papa {margin: 150px 0 0 calc(50% - 663px); width: 1164px;height:680px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; overflow: hidden;border: 1px solid;background: #333 url('https://xlaj.cn/assets/file/zp/20230908105521.jpg ') no-repeat center/cover; position: relative;z-index: 12345;}
#tu{position: absolute;top:0%; left:0%;z-index: 2;
        width: 100%;background:url('https://xlaj.cn/assets/file/zp/20230908105601.jpg') no-repeat center/cover;
        height: 100%;animation: round 4s linear infinite; }
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1)translate(10%,0%);filter:hue-rotate(360deg);
opacity:1}

100% {
-webkit-transform:rotate(0deg)scale(4)translate(0%,0%);filter:hue-rotate(0deg);
opacity:0}
}

#dt1{ position: absolute; width: 120px; height: 120px; bottom: 15%; left: 180px; }

#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 50%;top:80%; transform: translate(-50%, 10px);font:normal 3.2em 华文隶书; color:#0000;filter:hue-rotate(0deg)contrast(120%)brightness(200%);filter: drop-shadow( 2px 2px 0px #000000); z-index: 2; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#mplayer { position: absolute; left: 0%;top:90%;cursor: pointer;z-index:880; width: 100%; mix-blend-mode: exclusion;height:50px;filter:invert(100%)}
@keyframes cover1{0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%);width: 100%;}
}
@keyframes cover2 { 0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%);width: 100%;}
}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:8%;color:#FFffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em华文隶书; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">

<div id='dt1'><img id="testImg" src="https://mp3.wf/static/image/smiley/xiaobaitu/28.gif" alt="" /></div>

<div id='tu'></div>

<span id="fullscreen">全屏欣赏</span>
<div id="main" >
<div id="stars"></div>
</div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>

<div id="bnt"><div id="mplayer"><audiostyle="width:100%;" id="aud" autoplay="autoplay" controls="controls" height="100%" loop="loop" src="https://xlaj.cn/assets/file/zp/20230908105633.mp3"width="100%"></audio></div></div>
</div>

<script>
(function() {
        let mKey = 0, mFlag = true;
        let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
        let averAdd = 0, offset = 0;
        let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);return(lrcTime(lrcAr));}
        let geci = `流泪的飞蛾《Live版》
歌手 - 孙艺琪
词/曲：刘海东
编曲：孙培喜
和声：凌菲
混音：柒音乐工作室
出品：金芙蝶文化传媒
你有没有听说过
那只流泪的飞蛾
在她小小世界里
永远是对爱的执着
看人间的烟火
是谁在声声叹奈何
怕只怕成了过客
漫漫红尘要哪里停泊
一只流泪的飞蛾
她说她真的爱过
纵然前方是一团烈火
她也从未想过要退缩
哦流泪的飞蛾
她说她不想错过
明明知道也很脆弱
只是坚信自己的选择
你有没有听说过
那只流泪的飞蛾
在她小小世界里
永远是对爱的执着
看人间的烟火
是谁在声声叹奈何
怕只怕成了过客
漫漫红尘要哪里停泊
一只流泪的飞蛾
她说她真的爱过
纵然前方是一团烈火
她也从未想过要退缩
哦流泪的飞蛾
她说她不想错过
明明知道也很脆弱
只是坚信自己的选择
一只流泪的飞蛾
她说她真的爱过
纵然前方是一团烈火
她也从未想过要退缩
哦流泪的飞蛾
她说她不想错过
明明知道也很脆弱
只是坚信自己的选择
明明知道也很脆弱
只是坚信自己的选择
`;
        let lrcAr = getLrcAr(geci);
        let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
        let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
        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;}
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
        mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();

bnt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bnt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>bnt.style.animationPlayState = 'paused');
</script>

<script>

let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
        };
stars.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>stars.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>stars.style.animationPlayState = 'paused');


tu.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>tu.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>tu.style.animationPlayState = 'paused');
</script>
<style>
#main {
position: relative;
overflow: hidden;
width: 100%; z-index: 2;
min-height: 98vh;
perspective: 340px;}

#stars {
position: absolute;z-index: 2;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
border-radius:50%;
box-shadow: -238px 108px #fff000, 193px -376px #ff0000, -1264px -60px #fff000,145px -443px #fff000, -1440px 37px #fff000, 262px -136px #fff000, 212px 219px #fff000, 319px 223px #fff000, 1246px -51px #c9c9c9,308px 26px #fff000, 147px 229px #fff000, -1041px 450px #fff000, 671px 86px white, -921px 234px #fff000, -957px 242px #fff000, 1249px -285px #fff000, 741px 434px #fff000, -1030px 330px #00f000, 311px -475px #fcfcfc, -413px -105px #ff0000, 868px -435px #f7f7f7, -790px 289px #ff0000, 202px 427px #fcfcfc, -22px -158px #ff0000, -1294px -297px #cccccc, -63px 200px #ff0000, -592px -86px #f7f7f7, -732px 366px white, -1426px -262px #e8e8e8, 475px -400px #ff0000, -1442px -153px #00ff00, 1124px -219px #ededed, 701px 257px #ff0000, 36px -179px #ff0000, -937px 480px #f7f7f7, -267px -418px #00ff00, 1467px 127px #ff0000, -1128px 274px #d1d1d1, -180px 430px #e0e0e0,180px 430px #ffffff, 624px 275px #ff0000, -473px 150px #e6e6e6, -537px -348px #d4d4d4, 410px 455px #ff0000, 497px -29px #cccccc, 416px -370px whitesmoke, 977px 82px #c2c2c2, 1209px -222px #f0f0f0, 637px 360px #fcfcfc,-416px 370px whitesmoke, -1049px 409px white, 959px 407px #ff0000, -1153px -168px #dedede, -437px -216px #dbdbdb, -572px 420px #ff0000, -228px 78px #ff0000, -925px 452px #ccffcc, 244px 30px #ff0000, 453px -336px #fff000, -453px -336px #ff0000, 993px -63px #c2c2c2, 670px -343px #d9d9d9, -1088px 344px #000078, -170px -153px #fff000, 987px -208px #00ff00, 596px 166px #fcfcfc, -1362px -28px #ff0000, 1291px -106px #e3e3e3, -1128px 169px #ededed, 1056px 367px #ebebeb, 261px -128px #ff0000, 1017px 401px #cccccc, 1381px 245px #e3e3e3, 536px -113px #fafafa, -92px -217px #e3e3e3, 1481px 268px #00ff00, 832px -345px #000090, -863px 138px #00ff00, -997px -412px #e3e3e3, -330px -260px #ffff00, 691px -39px #fcfcfc, -468px -135px #ff0000, -535px 405px #e8e8e8, -1289px -284px #e3e3e3, 823px -225px #00ff00, -1172px -348px white, 505px -319px #ff0000, 94px -45px #ededed, -687px -64px #c7c7c7, -1133px -456px #e2f2f2, 1357px 135px #e0e0e0, -919px -249px whitesmoke, 206px 32px white, 1453px -338px #cccccc, -764px 83px #e8e8e8, 726px 85px #00f000, 205px 103px #e3e3e3, 85px 116px #d1d1d1, 1104px -121px #00ff00,-1104px 121px #fffcfc, 649px -304px #dbdbdb, -313px 313px whitesmoke, 491px -419px #c9c9c9, -1405px 397px #cfcfcf, 30px -81px #ff0000;130px -130px #eeeeee,1130px -230px #00ff00,-1000px -1550px 30px 0px #ff0000,500px -350px 100px 0px #00ff00;
animation: fly 3s linear infinite;
transform-style: preserve-3d;
}

#stars:before{
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}

#stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}

#stars:before {
transform: translateZ(-300px);
animation: fade1 2s linear infinite;
}

#stars:after {
transform: translateZ(-600px);
animation: fade2 2s linear infinite;
}

@keyframes fly {
from {
    transform: translateZ(0px);
}
to {
    transform: translateZ(300px);
}
}
@keyframes fade1 {
from {
    opacity: 0.9;
}
to {
    opacity: 1;
}
}
@keyframes fade2 {
from {
    opacity: 0.2;
}
to {
    opacity: 0.9;
}
}
</style>
<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("testImg");
varbutton = document.getElementById("bnt");
let mState = () => aud.paused ? image.stop() : image.play();
bnt.onclick = () => {aud.paused ? aud.play() : aud.pause();}
aud.addEventListener('play', mState,false);
aud.addEventListener('pause', mState,false);
</script>

小辣椒 发表于 2023-9-10 12:50

亚伦你太棒了，这个我测试了几次狐狸可以控制就是粒子没有了

小辣椒 发表于 2023-9-10 12:54

昨天我浪费了一个晚上的时间太可惜，开始是被昨天发的那个帖的全屏欣赏出现了乱码，捣鼓许久，结果是少了一句编码的代码，后来加你那个动感播放器里面的图片，加了几次都没有成功，郁闷哦

小辣椒 发表于 2023-9-10 12:54

今天上来看见这个可以了太高兴的，谢谢亚伦

小辣椒 发表于 2023-9-10 12:56

昨天后来去加你那个动感播放器的图片，没有成功，看见过你以前4个图片一键停止，我昨天去加，没有成功

亚伦影音工作室 发表于 2023-9-10 12:56

小辣椒 发表于 2023-9-10 12:50
亚伦你太棒了，这个我测试了几次狐狸可以控制就是粒子没有了
几个地方做了修改：1 视频播放器直接改为音频常规播放器; 2 控制动图用专用代码。3 动画可以添加多个，且都能被控。播放器背景可根据音画背景调试！

小辣椒 发表于 2023-9-10 12:58

亚伦影音工作室 发表于 2023-9-10 12:56
几个地方做了修改：1 视频播放器直接改为音频常规播放器; 2 控制动图用专用代码。3 动画可以添加多个，且 ...

这个加的我都很喜欢的，主要还是可以加图片，我昨天那个为加图片捣鼓到半夜的，最后还是没有成功{:4_198:}

红影 发表于 2023-9-10 13:29

这个的确可以一键控制所有的动态呢，给亚伦老师点赞{:4_187:}

醉美水芙蓉 发表于 2023-9-10 16:42

页: [1]
查看完整版本: 狐狸控制住了