论坛 › 动画音画 › 测试老小孩社区文件外链情况

亚伦影音工作室 发表于 2025-1-12 22:24

测试老小孩社区文件外链情况

本帖最后由 亚伦影音工作室 于 2025-1-13 13:46 编辑 <br /><br /><style>
      #papa{margin: 150px -380px;
        width: 1400px;
        height: 740px;
        background:url('https://img2.oldkids.cn/upload/2020/10/23/photo_20201023221718907.jpg') no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;}

      #wallpaper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;background:url('https://img2.oldkids.cn/upload/2020/10/23/photo_20201023221718907.jpg') no-repeat center/cover;
            background-size: cover;
            background-position: center;
            transition: background-image 0s ease-in-out ; /* 基础转场效果 */
      }

      /* 定义不同的转场效果 */
      .fade {
            animation: fadeEffect 2s forwards ;
      }

      @keyframes fadeEffect {
            from { opacity: 0; }
            to { opacity: 1; }
      }

      .slide-left {
            animation: slideLeftEffect 2s forwards ;
      }

      @keyframes slideLeftEffect {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
      }


      .slide-right {
            animation: slideRightEffect 2s forwards ;
      }

      @keyframes slideRightEffect {
            from { transform: translateX(-100%); }
            to { transform: translateX(0); }
      }
.photo {animation: round 3s forwards;}
@keyframes round {0% {opacity: 1; transform:translate(0%,0%)scale(0)rotate(360deg);}
50% {opacity: 1;transform:translate(0%,0%)scale(1);}
100% {opacity: 1; transform:translate(0%,0%)scale(1);}
}
.huid {animation: yuoyu 3s forwards;}
@keyframes yuoyu {0% {opacity: 1; clip-path: ellipse(0% 00% at 50% 50%);}

30% {opacity: 1;clip-path: ellipse(50% 50% at 50% 50%);}
60% {opacity: 1; clip-path: ellipse(100% 100% at 50% 50%)}
100% {opacity: 1; clip-path: ellipse(100% 100% at 50% 50%)}
}
.guid {animation: guoyu 3s forwards;}
@keyframes guoyu {0% {opacity: 1; clip-path: circle(0 at 50% 100%);}
50% {opacity: 1; clip-path: circle(100% at 50% 100%);}
100% {opacity: 1; clip-path: circle(100% 100% at 50% 50%)}
}
.wguid {animation: wguoyu 3s forwards;}
@keyframes wguoyu {0% {opacity: 1; clip-path:circle(0% at 130% 50%);}
50% {opacity: 1; clip-path: circle(100% at 50% 100%);}
100% {opacity: 1; clip-path: circle(100% 100% at 50% 50%)}
}
.wmuid {animation: wmuoyu 3s forwards;}
@keyframes wmuoyu {0% {opacity: 1;transform:scale(0.8)scale3d(0,0,-300) skew(0,70deg);}
50% {opacity: 1;transform:scale(1);}
100% {opacity: 1;transform:scale(1)}
}
.wmvd {animation: wmyu 3s forwards;}
@keyframes wmyu {0% {opacity: 1;transform:scale(1,0);}
50% {opacity: 1;transform:scale(1);}
100% {opacity: 1;transform:scale(1)}
}
.wmvo {animation: wmyuo 3s forwards;}
@keyframes wmyuo {0% {opacity: 1;transform:scale(0,1);}
50% {opacity: 1;transform:scale(1);}
100% {opacity: 1;transform:scale(1)}
}
.wmv {animation: wmy 2s forwards;}
@keyframes wmy {0% {opacity: 1;transform:scale(4);}
50% {opacity: 1;transform:scale(1);}
100% {opacity: 1;transform:scale(1)}
}
.wmva {animation: wmya 2s forwards;}
@keyframes wmya {0% {opacity: 1;transform:scale(0);}
50% {opacity: 1;transform:scale(1);}
100% {opacity: 1;transform:scale(1)}
}
.bwmva {animation: brightnessIn 3s forwards;}
@keyframes brightnessIn {
    0% {opacity: 1;clip-path:polygon(0 50%, 50% 50%, 50% 0, 50% 0, 50% 50%, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 100%, 50% 50%, 0 50%);}
50%{
opacity: 1;clip-path:polygon(0 50%, 0 0, 50% 0, 50% 0, 100% 0, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 0 100%, 0 50%);}
100%{
opacity: 1;clip-path:polygon(0 50%, 0 0, 50% 0, 50% 0, 100% 0, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 0 100%, 0 50%);}
}
.bovap {animation: brig 3s forwards;}
@keyframes brig {0% {opacity: 1;transform:scale(1);clip-path:inset(50% 50% 50% 50%);}
50% {opacity: 1;transform:scale(1);clip-path:inset(0% 0% 0% 0%);}
100% {opacity: 1;clip-path:inset(0% 0% 0% 0%);}
}
.abop {animation: round 3s forwards;}
@keyframes round {0% {
opacity: 1;clip-path:polygon(50% 50%, 100% 0%, 50% 50%, 0% 100%);
-webkit-transform:translate(0%,0%)scale(1);}
50% {
opacity: 1;clip-path:polygon(100% 100%, 100% 0%, 0% 0%, 0% 100%);
-webkit-transform:translate(0%,0%)scale(1);}
100% {
opacity: 1;clip-path:polygon(100% 100%, 100% 0%, 0% 0%, 0% 100%);
-webkit-transform:translate(0%,0%)scale(1);}
}

.pabop {animation: roundo 3s forwards;}
@keyframes roundo {0% {
opacity: 1;box-shadow: 0px 0px 350px 350px #880000 inset;
-webkit-transform:translate(0%,0%)scale(1);}
80% {
opacity: 1;box-shadow: 0px 0px 80px 80px #880000 inset;
-webkit-transform:translate(0%,0%)scale(1);}
100% {
opacity: 1;box-shadow: 0px 0px 0px 0px #880000 inset;
-webkit-transform:translate(0%,0%)scale(1);}
}

.qabop {animation: roundop 3s forwards;}
@keyframes roundop {0% {
opacity: 1;box-shadow: 0px 0px 350px 350px #006400 inset;
-webkit-transform:translate(0%,0%)scale(1);}
80% {
opacity: 1;box-shadow: 0px 0px 80px 80px #006400 inset;
-webkit-transform:translate(0%,0%)scale(1);}
100% {
opacity: 1;box-shadow: 0px 0px 00px 00px #006400 inset;
-webkit-transform:translate(0%,0%)scale(1);}
}
#lrc{left: 10%;top: 75%;}#lrcc {left: 90%;transform: translate(-102%);top: 85%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg, #EE0000 12%,#078504 35%,#060344 65%,#DE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 3.2em 华文新魏;color: #222222;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);z-index: 15;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 100%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg); clip-path: inset(0% 100% 0 0); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {to { clip-path: inset(0 0% 0 0);}}@keyframes cover2 {to { clip-path: inset(0 0 0 0);}}

    </style>
<div id="papa">
    <div id="wallpaper"></div>
<audio id="aud" src="https://img4.oldkids.cn/upload/2025/01/12/blog_260848378_20250112202340166.mp3" loop autoplay></audio>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<script>
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
wallpaper.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>wallpaper.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>wallpaper.style.animationPlayState = 'paused');
</script>

    <script>
      const wallpaper = document.getElementById('wallpaper');
      const images = [
            'url(https://img2.oldkids.cn/upload/2020/10/23/photo_20201023221717120.jpg)',
            'url(https://img1.oldkids.cn/upload/2020/10/23/photo_20201023221718179.jpg)',
            'url(https://img4.oldkids.cn/upload/2020/10/23/photo_20201023221718526.jpg)',
'url(https://img1.oldkids.cn/upload/2020/10/23/photo_20201023221718556.jpg)',
            'url(https://img2.oldkids.cn/upload/2020/10/23/photo_20201023221718907.jpg)',
            'url(https://img2.oldkids.cn/upload/2020/10/23/photo_20201023221718570.jpg)',
'url(https://img1.oldkids.cn/upload/2020/10/23/photo_20201023221718647.jpg)'
         

            // 添加更多图片路径
       ];
      let currentIndex = 0;
      const effects = ['pabop','qabop','abop','fade', 'slide-left', 'slide-right', 'photo', 'huid', 'guid', 'wguid', 'wmuid', 'wmvd', 'wmvo', 'wmv', 'wmva', 'bwmva', 'bovap']; // 转场效果列表

      function changeWallpaper() {
      currentIndex = (currentIndex + 1) % images.length;
            const effect = effects; // 随机选择一个转场效果
            wallpaper.classList.remove(...effects); // 移除所有可能的类名
            wallpaper.classList.add(effect); // 添加新的转场效果类名
            wallpaper.style.backgroundImage = images;
      }

      setInterval(changeWallpaper, 4000); // 每4秒切换一次壁纸
    </script>
<span id="lrcStr" style="visibility: hidden;">
眼中的雨 - 蒋婴
作词：周兵
作曲：蒋婴
编曲：孙培喜
演唱：蒋婴
☆★Lrc编辑 梅竹★☆
☆★协编 蓝菊★☆
。。。。。。
熬过了漫长的冬季
左等右盼都不见你
问时光沉默轻轻无语
此般深情一直放心底
又迎来盎然的春季
万紫千红花开美丽
只见花开却不见你来
我寻寻觅觅你的踪迹
你是我眼中的一场雨
打湿了爱情的愁绪
用长长的思念写成诗句
一生浪漫为你提笔
你是我梦中的一场雨
驱散了昨夜的寒意
这深深地爱恋因你痴迷
一寸柔肠情深几许
(Music)
☆★亚伦谢谢欣赏★☆
=亚伦影音=
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
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;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
      let lrcAr = [];
      let arr="";
      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 showLrc = (time) => {
      lrca=lrcAr;
      lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
      let Y=String(mKey/2).indexOf(".");
      if (Y == -1)
    {
      0==mKey&&(lrc.innerHTML=lrca);
      lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
      lrcc.dataset.lrc = "";
      lrc.style.setProperty('--motion', 'cover1');
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
      }
    else
    {
      lrc.innerHTML = lrcb;
      lrcc.dataset.lrc = lrca;
      lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
      lrcc.style.setProperty('--tt', time + 's');
      lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
      }
      mKey += 1;
};
/*函数 ：处理当前歌词索引 mKey*/
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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused")):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"));
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});

aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>

红影 发表于 2025-1-12 22:43

挺好的，显示正常，制作漂亮，欣赏亚伦老师好帖{:4_187:}

起个网名好难 发表于 2025-1-13 08:20

本帖最后由 起个网名好难 于 2025-1-13 08:38 编辑

老小孩的图片可以直接用

https://img2.oldkids.cn/upload/2022/01/29/photo_0_20220129201934440.jpg

山里人 发表于 2025-1-13 10:05

挺好的呀，能听到声音，就是不知道链接能用多久

杨帆 发表于 2025-1-14 16:37

好消息，谢谢亚伦老师{:4_191:}

查看完整版本: 测试老小孩社区文件外链情况