谁能陪我吹吹风 (烟嗓版) - 烟嗓小杰 - 动画音画 - 花潮论坛

亚伦影音工作室 发表于 2026-8-18 10:38

谁能陪我吹吹风 (烟嗓版) - 烟嗓小杰

本帖最后由亚伦影音工作室于 2026-8-18 11:05 编辑 <br /><br /><style>
#papa{ position: relative; width: 1286px; height: 740px; margin-left: -320px; margin-top: 0; overflow: hidden; background:#008080; --state: paused;}
#vid1 {z-index:1;
   position: absolute;
   width: 100%;
   height: 100%;
top: 0px;
left: 0;
   object-fit: cover;

}
.vid {width: 100%; height:100%;z-index:2;
position: absolute;
top:0%; left:0%;
object-fit: cover;
pointer-events: none;
opacity: 0;-webkit-mask: url(https://pic1.imgdb.cn/i/0348v2wqq8phgSqDTOEli1.png)no-repeat center/740px 740px;
animation: round 100s linear infinite var(--state);}
@keyframes round {
0% {
opacity: 1;
-webkit-transform:translate(100%,-100%) scale(0.5);}
4% {
opacity: 1;
-webkit-transform:translate(0%,0%)scale(0.5)rotate(360deg);
}
6% {
opacity: 1;
-webkit-transform:translate(20%,0%)scale(1)rotateY(40eg)rotateX(-80deg)rotatez(-80deg);
}
6.6% {
opacity: 1;
-webkit-transform:translate(-10%,-10%)scale(1)rotateY(-40deg)rotateX(80deg)rotatez(180deg);
}
10% {
opacity: 1;
-webkit-transform:translate(50%,0%)scale(0.8)rotateY(-40deg)rotate(360deg);
}
14% {
opacity: 0;
-webkit-transform:translate(-100%,-20%)scale(0.5);
}
}
.vid:nth-child(1){animation-delay: 90s;}
.vid:nth-child(2){animation-delay: 80s;}
.vid:nth-child(3){animation-delay: 70s;}
.vid:nth-child(4) {animation-delay: 60s;}
.vid:nth-child(5) {animation-delay: 50s;}
.vid:nth-child(6){animation-delay: 40s;}
.vid:nth-child(7){animation-delay: 30s;}
.vid:nth-child(8){animation-delay: 20s;}
.vid:nth-child(9) {animation-delay: 10s;}
.vid:nth-child(10) {animation-delay: 0s;}
.lrc {z-index:10;
   position: absolute;
   width: 100%;
   height: 60px; /* 只显示一行歌词高度 */
   top: 87%;
   left: 50%;
   transform: translate(-50%, -50%); /* 容器整体居中 */
   overflow: hidden;
   text-align: center;
}

.lrc #ul {filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
   width: 100%;
   padding: 0;
   list-style: none;
   transition: 0.1s all ease;
   margin: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.lrc #ul li {
   font-size: 46px;
   color: #000;
   font-family:"华文隶书", sans-serif;
   font-weight:500;
   transition: 0.1s all ease;
   list-style-type: none;
   text-align: center;
   padding: 0 10px;
   height: 60px;
   line-height: 60px;
   cursor: pointer;
   white-space: nowrap; /* 防止歌词换行 */
}

.lrc #ul li span {
   margin: 0 8px;
   transform-origin: center center; /* x轴和y轴均以中心为原点 */
   transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1); /* 缓动函数让动画更自然 */
   display: inline-block; /* 确保transform-origin生效 */
}

.lrc #ul li span.active {
   font-family: "华文隶书", "Microsoft YaHei", sans-serif;
   font-weight: 500;
   font-size: 48px;
   color: red;
   transform: scale(1.2)rotate(-360deg); /* 缩放效果 */
}
#btnplay { top:10%; left:10%;z-index: 20;
display: block;position: absolute; transform: rotateY(180deg);
width: 250px; height: 250px;mix-blend-mode: difference;
background: url(https://pic.imgdb.cn/item/67502acbd0e0a243d4dd5ddc.png)no-repeat center/3250px 250px;
animation: heart-burst steps(13) 2s infinite var(--state);
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -3250px 0;}
}
#fullscreen{border-radius: 4px;position: relative;
color:#eee;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 80;
font-size: 35px;font-family: "华文隶书", "Microsoft YaHei", sans-serif;
border: none;
cursor: pointer;margin: 8px 5px;left: 78%;
}
</style>

<div id="papa">
<video id="vid1" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/17f42314db4f48af50049cf8a950948b_preview.mp4" autoplay loop muted></video>
<div >
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4f285bb81d634dbf2a5476d25f2f7222_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/9dd8fc2c5afd60a552374ef302296f31_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4112d75a756f1c2f53501848accfc02f_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/363745ffe5208ce911b069571a1f0fbe_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/31c0313b0771c95057c457929045454e_preview.mp4" loop muted autoplay=""></video>

<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/1c5a48c9183b0cc1f335fec7e6519246_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6c551582244254de857fa319a6f6951f_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c9d1e36ffc69a7e5b46717ad1c6e49a1_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/a77a6be1e46a4586c90365ff99729c2e_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3fddb063664ec09ccf4bcbbca2edc037_preview.mp4" loop muted autoplay=""></video>
</div>
<button id="fullscreen">全屏观赏</button>
<div class="lrc">
<ul id="ul"></ul>
   </div>
<divid="btnplay" ></div>
</div>
<audio id="audio" src="https://www.qeecc.com/plug/down.php?ac=music&lk=mp3&id=Y2lpbm54ZHNr" loop autoplay ></audio>
<script>
let lrc = `谁能陪我吹吹风 (烟嗓版) - 烟嗓小杰
词：宋普照
曲：隔壁朋友
去了有你的城看了有你的灯
却再不能和你相拥
走过你走的路梦过有你的梦
醒来只剩泪水翻涌
明知不该再等却还一直在等
越等我的心就越空
期待和你相逢又怕和你相逢
情不可控沉迷其中
谁能陪我吹一吹风吹走心中的痛
吹走你的海誓山盟
谁能陪我喝一杯酒忘记你的温柔
请你别再出现梦中
谁能陪我吹一吹风吹走心中的痛
吹散我的情有独钟
你曾给过我的感动又把谁给感动
你来一程伤我一生
去了有你的城看了有你的灯
却再不能和你相拥
走过你走的路梦过有你的梦
醒来只剩泪水翻涌
明知不该再等却还一直在等
越等我的心就越空
期待和你相逢又怕和你相逢
情不可控沉迷其中
谁能陪我吹一吹风吹走心中的痛
吹走你的海誓山盟
谁能陪我喝一杯酒忘记你的温柔
请你别再出现梦中
谁能陪我吹一吹风吹走心中的痛
吹散我的情有独钟
你曾给过我的感动又把谁给感动
你来一程伤我一生
谁能陪我吹一吹风吹走心中的痛
吹走你的海誓山盟
谁能陪我喝一杯酒忘记你的温柔
请你别再出现梦中
谁能陪我吹一吹风吹走心中的痛
吹散我的情有独钟
你曾给过我的感动又把谁给感动
你来一程伤我一生

`;
let lrcArr = lrc.split('\n');
   let result = [];
   var audio = document.querySelector("#audio"),
         ul = document.querySelector("#ul"),
         container = document.querySelector(".lrc");
   for (let i = 0; i < lrcArr.length; i++) {
         var lrcData = lrcArr.split(']');
         if (lrcData.length < 2) continue;
         var lrcTime = lrcData.substring(1);
         var words = lrcData.trim().split('');
         let lineWords = [];
         let startTime = parseTime(lrcTime);
         let wordDuration = (i < lrcArr.length - 1 && lrcArr.includes('[')) ?
            (parseTime(lrcArr.split(']').substring(1)) - startTime) / words.length : 0.5;
         words.forEach((word, index) => {
            lineWords.push({ time: startTime + index * wordDuration, text: word });
         });
         result.push(lineWords);
   }
function randomColor(){
const colors = ['#880000','#ffbb33','#00C851','#000078','#aa66cc','#ff8800','#ff33cc'];
return colors;
}
   function parseTime(lrcTime) {
         let lrcTimeArr = lrcTime.split(":");
         return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
   }

   function getIndex() {
         let time = audio.currentTime;
         for (let i = 0; i < result.length; i++) {
            if (result.time > time) return i - 1;
         }
         return result.length - 1;
   }

var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox1264a5=["\x63\x72\x65\x61\x74\x65\x44\x6F\x63\x75\x6D\x65\x6E\x74\x46\x72\x61\x67\x6D\x65\x6E\x74","\x6C\x65\x6E\x67\x74\x68","\x6C\x69","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x73\x70\x61\x6E","\x74\x65\x78\x74\x43\x6F\x6E\x74\x65\x6E\x74","\x74\x65\x78\x74","\x74\x69\x6D\x65","\x64\x61\x74\x61\x73\x65\x74","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x66\x6F\x72\x45\x61\x63\x68","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];function createElements(){let _0x5404x2=document]();for(let _0x5404x3=0;_0x5404x3< result];_0x5404x3++){let _0x5404x4=document](__Ox1264a5);result]((_0x5404x5)=>{let _0x5404x6=document](__Ox1264a5);_0x5404x6]= _0x5404x5];_0x5404x6]]= _0x5404x5];_0x5404x4](_0x5404x6)});_0x5404x4](__Ox1264a5,()=>{return audio]= result]});_0x5404x2](_0x5404x4)};ul](_0x5404x2)}createElements();;;(function(_0x5404x7,_0x5404x8,_0x5404x9,_0x5404xa,_0x5404xb,_0x5404xc){_0x5404xc= __Ox1264a5;_0x5404xa= function(_0x5404xd){if( typeof alert!== _0x5404xc){alert(_0x5404xd)};if( typeof console!== _0x5404xc){console](_0x5404xd)}};_0x5404x9= function(_0x5404xe,_0x5404x7){return _0x5404xe+ _0x5404x7};_0x5404xb= _0x5404x9(__Ox1264a5,_0x5404x9(_0x5404x9(__Ox1264a5,__Ox1264a5),__Ox1264a5));try{_0x5404x7= __encode;if(!( typeof _0x5404x7!== _0x5404xc&& _0x5404x7=== _0x5404x9(__Ox1264a5,__Ox1264a5))){_0x5404xa(_0x5404xb)}}catch(e){_0x5404xa(_0x5404xb)}})({})
   createElements();

   let containerHeight = container.clientHeight;
   let liHeight = 60;
   let minOffset = 0;
   let maxOffset = ul.clientHeight - containerHeight;
   const visibleLines = 1;
   let prevIndex = -1;

   function setOffset() {
         let index = getIndex();
         if (index === -1) index = 0;

         let offset = Math.max(0, Math.min((index - Math.floor(visibleLines / 2)) * liHeight, maxOffset));
         ul.style.transform = `translateY(-${offset}px)`;

         if (prevIndex !== -1) {
            let prevLi = ul.children;
            if (prevLi) {
               prevLi.querySelectorAll('span.active').forEach(span => span.classList.remove('active'));
               prevLi.classList.remove('active');
            }
         }
         let currentLi = ul.children;
         if (currentLi) currentLi.classList.add('active');

         let currentTime = audio.currentTime;
         let currentLine = result;
         if (currentLine) {
            currentLine.forEach((wordObj, wordIndex) => {
               let span = currentLi.children;
               span.style.color = ul.style.color = randomColor();
               if (currentTime >= wordObj.time &&
                     (wordIndex === currentLine.length - 1 || currentTime < currentLine?.time)) {
                     span.classList.add('active');
               } else {
                     span.classList.remove('active');
               }
            });
            const currentLyric = currentLine.map(wordObj => wordObj.text).join('');
            if (!currentLyric) return;

            let charIndex = 0;
            for (let j = 0; j < currentLine.length; j++) {
               if (currentLine.time <= currentTime) {
                     charIndex = j + 1;
               }
            }

         }
prevIndex = index;
   }
audio.addEventListener("timeupdate", setOffset);

(function() {
   const vids = document.querySelectorAll('.vid');
   var mState = () => {papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');
      vids.forEach(vid => audio.paused ? (vid.pause(),vid1.pause()): (vid.play(),vid1.play()) );
   };
audio.onplaying = audio.onpause = () => mState();
btnplay.onclick = () => audio.paused ? audio.play(): audio.pause();
})();

let fs = true;
   fullscreen.onclick = () => {
            fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
            fs = !fs;
   };

</script>

梦油发表于 2026-8-18 10:56

同种少女的眼神制作得很精细，很美。

红影发表于 2026-8-18 13:46

好听的歌曲，漂亮的视频轮播。欣赏亚伦老师好帖{:4_199:}

页: [1]

花潮论坛's Archiver

谁能陪我吹吹风 (烟嗓版) - 烟嗓小杰