落雨的秋 - 孙晓雨 - 动画音画 - 花潮论坛

亚伦影音工作室 发表于 2026-8-14 10:40

落雨的秋 - 孙晓雨

本帖最后由亚伦影音工作室于 2026-8-14 11:00 编辑 <br /><br /><style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa { position: relative; margin: 10px 0 10px calc(10% - 390px); width: 1286px;height: 720px;
   background: linear-gradient(to right, #0657B3,#81E3EC,#0657B3);overflow: hidden;
   box-shadow: 0px 0px 0px #333; display: grid;
place-items: center;--state: running; }

#vid {z-index:2;
   position: absolute;
   width: 100%;
   height: 100%;
top: 0px;
left: 0;
   object-fit: cover;

}
#djtu {position: absolute;
   top:0px; left:0px;z-index:3;
   width: 100%;
   height: 100%;transition: .1s;filter: invert(0%);
   mix-blend-mode: lighten;opacity:1;
}

#intro {margin: 0px0px;z-index:3;
   width: 100%;
   height:100%;
   position: absolute;
background:#220080;
background-size: cover;
opacity:1;mix-blend-mode:soft-light;
animation: hue-rotate 6s linear infinite var(--state);
}
@keyframes hue-rotate {
0%{
filter: hue-rotate(-360deg);
}

100%{
filter: hue-rotate(360deg);
}
}

#dayan {position: absolute;
   top:0px; left:150px;z-index:10;
   width: 1028px;
   height: 328px;transition: .1s;filter: invert(0%);
   opacity:1;
}
#lrc { --motion: cover2; --tt: 2s; position: absolute; left: 8%;font:normal 3em "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif"; color:transparent; z-index: 21;writing-mode: vertical-lr;white-space: pre;transform: translateY(0%);filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {position: absolute;content: attr(data-lrc); width: 10%; height: 100%; text-align: center;animation: var(--motion) var(--tt) linear forwards,bs 1sinfinite; animation-play-state: var(--state); }
@keyframes cover1{0% {
   opacity: 1; transform: scale(0);
   color:#ff0000;
}
50% {
   opacity: 1;color:#000078;
   transform: scale(1);
}
70% {
   opacity: 1;color:#880000;
   transform: scale(1);
}

100% {
   opacity: 1; transform: scale(1);
   color:#00aa00;
}

}
@keyframes cover2 {0% {
   opacity: 1; transform: scale(0);
   color:#ff0000;
}
50% {
   opacity: 1;color:#000078;
   transform: scale(1);
}
70% {
   opacity: 1;color:#880000;
   transform: scale(1);
}

100% {
   opacity: 1; transform: scale(1);
   color:#00aa00;
}

}

.set {
position: absolute;z-index: 10;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.set div {z-index: 10;
position: absolute;
display: block;
user-select: none;
}
.set div img {pointer-events: none;
max-width: 90px;
max-height: 120px;
}
.set div:nth-child(1) {
left: 20%;
animation: animate 15s linear infinite var(--state);
animation-delay: -7s;
}
.set div:nth-child(2) {
left: 50%;
animation: animate 20s linear infinite var(--state);
animation-delay: -5s;
}
.set div:nth-child(2) {
left: 50%;
animation: animate 20s linear infinite var(--state);
animation-delay: -5s;
}
.set div:nth-child(3) {
left: 70%;
animation: animate 25s linear infinite var(--state);
}
.set div:nth-child(4) {
left: 0%;
animation: animate 15s linear infinite var(--state);
animation-delay: -5s;
}
.set div:nth-child(5) {
left: 85%;
animation: animate 18s linear infinite var(--state);
animation-delay: -10s;
}
.set div:nth-child(6) {
left: 15%;
animation: animate 12s linear infinite var(--state);
animation-delay: -7s;
}
.set div:nth-child(7) {
left: 60%;
animation: animate 14s linear infinite var(--state);
animation-delay: -7s;
}
@keyframes animate {
0% {
opacity: 0;
top: -10%;
transform: translateX(20px) rotate(0deg);
}
10% {
opacity: 1;
}
20% {
transform: translateX(-20px) rotate(45deg);
}
40% {
transform: translateX(-20px) rotate(90deg);
}
60% {
transform: translateX(-20px) rotate(135deg);
}
80% {
transform: translateX(-20px) rotate(180deg);
}
100% {
top: 110%;
transform: translateX(-20px) rotate(225deg);
}
}
.set2 {
transform: scale(2) rotateY(180deg);
filter: blur(2px);
}

.set3 {
transform: scale(0.8) rotateY(30deg);
filter: blur(4px);
}

#bnt{left:80%;top: 78%;width: 150px;height: 50px;position: absolute;filter: invert(60%); cursor: pointer;z-index: 61}
#ptxt{width:100%;height:6px;font:100 20px/0px "华文行楷","SimHei", "Arial", "sans-serif";color: #555;line-height:0px;bottom: 12%;left:84%;position: absolute;z-index: 20}
#prog {position: absolute; display: grid; place-items: center; width: 215px; height: 115px; left:77%; bottom: 10%;border-radius: 80%;-webkit-mask: radial-gradient( transparent 67%, #000 68%, #000 0);cursor:pointer; z-index: 60;}

#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:4%; left:85%;color:#000;font: 100 2em"Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif"; opacity: 1; cursor: pointer; z-index: 10}
</style>
<div id="papa">
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4e3c9caa54b306cc26de6ae2f42bf834_preview.mp4" autoplay loop muted></video>
<img id = "djtu" src = "https://pic1.imgdb.cn/i/0346OsRfR53jEzhj1mIgtO.gif">
<div id="lrc" data-lrc=""></div>
<div id="intro"></div>
<img id = "dayan" src = "https://pic1.imgdb.cn/i/4aaH9WCtYdfCubxVBki9EG.gif">
<div class="set">
<div><img src="https://i.postimg.cc/90FhMGh5/589b1fd02096a705e895cd6e.png" alt=""/></div>
<div><img src="https://i.postimg.cc/L5scR2tm/Autumn-Leaf-PNG-Clip-Art-2012.png" alt=""/></div>
<div><img src="https://i.postimg.cc/8zvqTy6f/Autumn-Maple-Leaf-PNG-Clip-Art-1973.png" alt=""/></div>
<div><img src="https://i.postimg.cc/8zvqTy6f/Autumn-Maple-Leaf-PNG-Clip-Art-1973.png" alt=""/></div>
<div><img src="https://i.postimg.cc/bJg7Ks26/Red-Autumn-Leaf-PNG-Clip-Art-2117.png" alt=""/></div>
<div><img src="https://i.postimg.cc/Nf53zGG4/Yellow-Leaf-PNG-Clip-Art-2011.png" alt=""/></div>
<div><img src="https://i.postimg.cc/HLD15Ggt/Yellow-Autumn-Leaf-PNG-Clip-Art-2119.png" alt=""/></div>
</div>
<div class="set set2">
<div><img src="https://i.postimg.cc/90FhMGh5/589b1fd02096a705e895cd6e.png" alt=""/></div>
<div><img src="https://i.postimg.cc/L5scR2tm/Autumn-Leaf-PNG-Clip-Art-2012.png" alt=""/></div>
<div><img src="https://i.postimg.cc/8zvqTy6f/Autumn-Maple-Leaf-PNG-Clip-Art-1973.png" alt=""/></div>
<div><img src="https://i.postimg.cc/8zvqTy6f/Autumn-Maple-Leaf-PNG-Clip-Art-1973.png" alt=""/></div>
<div><img src="https://i.postimg.cc/bJg7Ks26/Red-Autumn-Leaf-PNG-Clip-Art-2117.png" alt=""/></div>
<div><img src="https://i.postimg.cc/Nf53zGG4/Yellow-Leaf-PNG-Clip-Art-2011.png" alt=""/></div>
<div><img src="https://i.postimg.cc/HLD15Ggt/Yellow-Autumn-Leaf-PNG-Clip-Art-2119.png" alt=""/></div>
</div>
<div class="set set3">
<div><img src="https://i.postimg.cc/90FhMGh5/589b1fd02096a705e895cd6e.png" alt=""/></div>
<div><img src="https://i.postimg.cc/L5scR2tm/Autumn-Leaf-PNG-Clip-Art-2012.png" alt=""/></div>
<div><img src="https://i.postimg.cc/8zvqTy6f/Autumn-Maple-Leaf-PNG-Clip-Art-1973.png" alt=""/></div>
<div><img src="https://i.postimg.cc/8zvqTy6f/Autumn-Maple-Leaf-PNG-Clip-Art-1973.png" alt=""/></div>
<div><img src="https://i.postimg.cc/bJg7Ks26/Red-Autumn-Leaf-PNG-Clip-Art-2117.png" alt=""/></div>
<div><img src="https://i.postimg.cc/Nf53zGG4/Yellow-Leaf-PNG-Clip-Art-2011.png" alt=""/></div>
<div><img src="https://i.postimg.cc/HLD15Ggt/Yellow-Autumn-Leaf-PNG-Clip-Art-2119.png" alt=""/></div>
</div>

<img id = "bnt" src = "https://pic1.imgdb.cn/item/6a47a5441f8fda9783debeed.png">
<div id="ptxt">正在播放 0%</div>
<divid="prog"></div>
<span id="fullscreen">全屏观赏</span>
</div>
<audio id="aud" src="https://www.djdvd.com/plug/down.php?ac=music&lk=mp3&id=646e6433654868756141.mp3" autoplay loop></audio>

<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 = `落雨的秋 - 孙晓雨
词：刘艳梅
曲：王帅
出品：亚伦影音工作室
又是落叶飘零的秋
我站在拥挤的街头
静静守望你归来的温柔
再次温暖我寂寞的等候
又是候鸟南飞的时候
漫天秋雨诉说着离愁
几许回望你远去的轻舟
泪水模糊我无助的眼眸
人世间有多少无望的守候
总是在这泛黄的清秋
新月如钩谁伫立在窗口
一缕牵挂醉了几个秋
红尘中有多少无奈的分手
相思淋湿在多雨的秋
场景依旧谁在风中驻守
一曲相思绵绵永无休
又是候鸟南飞的时候
漫天秋雨诉说着离愁
几许回望你远去的轻舟
泪水模糊我无助的眼眸
人世间有多少无望的守候
总是在这泛黄的清秋
新月如钩谁伫立在窗口
一缕牵挂醉了几个秋
红尘中有多少无奈的分手
相思淋湿在多雨的秋
场景依旧谁在风中驻守
一曲相思绵绵永无休
人世间有多少无望的守候
总是在这泛黄的清秋
新月如钩谁伫立在窗口
一缕牵挂醉了几个秋
红尘中有多少无奈的分手
相思淋湿在多雨的秋
场景依旧谁在风中驻守
一曲相思绵绵永无休
一曲相思绵绵永无休

`;
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;}
function playing() {
lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
}

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;}}});

})();
prog.onclick = (e) => { let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
            deg += (e.offsetX < 10 && e.offsetY < 50) ?450 : 90;
            aud.currentTime = aud.duration * deg / 360;
            }
aud.addEventListener('timeupdate', () => {
            aud.addEventListener('timeupdate', () => {prog.style.background = 'conic-gradient(from 0deg,#ff0000,#ff0000,#ff0000 ' + aud.currentTime / aud.duration * 100 + '%, #555 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
            });

bnt.onclick = () => aud.paused ? (aud.play(),bnt.src = "https://pic1.imgdb.cn/item/6a47a5441f8fda9783debeed.png",djtu.src = "https://pic1.imgdb.cn/i/0346OsRfR53jEzhj1mIgtO.gif",dayan.src = "https://pic1.imgdb.cn/i/4aaH9WCtYdfCubxVBki9EG.gif",vid.play()) : (aud.pause(),bnt.src = "https://pic1.imgdb.cn/item/6a47a5751f8fda9783decc81.png",djtu.src = "https://pic1.imgdb.cn/i/0346lltBp7mmtu0fIcWDfs.png",dayan.src = "https://pic1.imgdb.cn/i/0346mCWRuqvP4J6wwISHsB.png",vid.pause());

mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.onplaying = aud.onpause = () => mState();

aud.addEventListener("timeupdate",function(){
                           var percent= aud.currentTime / aud.duration
                           var sp = 600 / 100 ;
                           var swidth =(percent * 100 * sp) + "px";
                           console.log(percent*100,swidth)
                           //保留2位小数
                           document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"

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


</script>

红影发表于 2026-8-14 11:29

很奇特的效果，漂亮的制作。欣赏亚伦老师好帖{:4_199:}

红影发表于 2026-8-14 11:31

还有种图内外大雁和枫叶的呼应，真奇妙{:4_187:}

梦油发表于 2026-8-14 14:34

欣赏亚伦佳作，问好亚伦快乐。

杨帆发表于 2026-8-14 19:56

设计新，制作美，效果好，谢谢亚伦老师精彩示范{:4_190:}

页: [1]

花潮论坛's Archiver

落雨的秋 - 孙晓雨